const fs = require("fs");
const path = require("path");
const file = path.join(__dirname, "../src/components/say.vue");
let s = fs.readFileSync(file, "utf8");

const startToken = '  <el-drawer v-model="drawerVisible"';
const start = s.indexOf(startToken);
const tmplEnd = s.indexOf("</template>");
if (start === -1 || tmplEnd === -1) throw new Error("markers not found");

const drawersSection = s.slice(start, tmplEnd).trimEnd();

function drawerToInline(elBlock, showExpr) {
  const lines = elBlock.split("\n");
  const openRe = /^(\s*)<el-drawer\b[^>]*>/;
  const closeRe = /<\/el-drawer>\s*$/;
  const mOpen = elBlock.match(openRe);
  if (!mOpen) throw new Error("no el-drawer open");
  let inner = elBlock.replace(openRe, "").replace(closeRe, "").trimEnd();

  inner = inner.replace(
    /<template #header>\s*/,
    '<div class="el-drawer__header">\n'
  );
  inner = inner.replace(/<\/template>/, "</div>");

  const pad = "      ";
  const innerIndented = inner
    .split("\n")
    .map((ln) => (ln.trim() ? pad + ln.replace(/^\s{2}/, "") : ln))
    .join("\n");

  return [
    `    <div v-show="${showExpr}" class="say-inline-drawer-root">`,
    innerIndented,
    `    </div>`,
  ].join("\n");
}

const splitRe =
  /\n  <el-drawer v-model="drawerVisible"[\s\S]*?<\/el-drawer>\n\n  <el-drawer v-model="knowledgeVisible"[\s\S]*?<\/el-drawer>\n\n  <el-drawer v-model="bgDetailVisible"[\s\S]*?<\/el-drawer>\n\n  <el-drawer v-model="keywordVisible"[\s\S]*?<\/el-drawer>/;
const m = drawersSection.match(splitRe);
if (!m) throw new Error("could not split four drawers");

const full = m[0];
const parts = full.split(/\n\n  <el-drawer /).map((chunk, idx) => {
  if (idx === 0) return chunk;
  return "  <el-drawer " + chunk;
});

if (parts.length !== 4) throw new Error("expected 4 drawers got " + parts.length);

const inlinePanels = [
  drawerToInline(parts[0], "drawerVisible"),
  drawerToInline(parts[1], "knowledgeVisible"),
  drawerToInline(parts[2], "bgDetailVisible"),
  drawerToInline(parts[3], "keywordVisible"),
].join("\n\n");

const overlayDrawers = parts
  .map((p) =>
    p.replace(/^(\s*)<el-drawer\b/, '$1<el-drawer v-if="!useInlineDrawers"')
  )
  .join("\n\n");

const replacement = [
  `  <Teleport v-if="useInlineDrawers" :to="inlineDrawerTeleportTo">`,
  inlinePanels,
  `  </Teleport>`,
  ``,
  `  <template v-if="!useInlineDrawers">`,
  overlayDrawers.replace(/^/gm, "    "),
  `  </template>`,
  ``,
].join("\n");

const out = s.slice(0, start) + replacement + s.slice(tmplEnd);
fs.writeFileSync(file, out);
console.log("patched", file);