import React from "react";
import { Box } from "@mui/material";

import { CvTheme } from "../cvBuilder";

export default function CvTemplateThumbnail({ theme, height = 150 }: { theme?: CvTheme; height?: number }) {
  const accent = theme?.swatches?.[0] || "#3157d5";
  const sidebar = theme?.swatches?.[1] || "#eef1f4";
  const paper = theme?.swatches?.[2] || "#ffffff";
  const layout = theme?.layout || "header-band";
  const hasSidebar = layout === "sidebar-left" || layout === "sidebar-right";
  const sidebarRight = layout === "sidebar-right";
  const lines = [92, 72, 84, 61, 88, 76, 95, 67];

  const body = <Box sx={{ p: "7%", minWidth: 0 }}>
    <Box sx={{ width: "48%", height: 5, borderRadius: 2, bgcolor: accent, mb: 1 }} />
    {lines.map((width, index) => <Box key={index} sx={{ width: `${width}%`, height: index === 4 ? 4 : 2.5, borderRadius: 2, bgcolor: index === 4 ? accent : "rgba(51,65,85,.24)", mt: index === 4 ? 1.25 : 0, mb: 0.7 }} />)}
  </Box>;
  const side = <Box sx={{ bgcolor: sidebar, p: "13% 12%", minWidth: 0 }}>
    <Box sx={{ width: 24, height: 24, borderRadius: theme?.photoShape === "circle" ? "50%" : 1, bgcolor: "rgba(255,255,255,.78)", border: "1px solid rgba(15,23,42,.1)", mb: 1.2 }} />
    {[66, 86, 54, 74, 62, 79].map((width) => <Box key={width} sx={{ width: `${width}%`, height: 2.5, borderRadius: 2, bgcolor: "rgba(30,41,59,.3)", mb: 0.8 }} />)}
  </Box>;

  return (
    <Box aria-hidden sx={{ height, bgcolor: paper, border: "1px solid", borderColor: "divider", borderRadius: 1.5, overflow: "hidden", boxShadow: "0 8px 20px rgba(15,23,42,.08)", display: "flex", flexDirection: "column" }}>
      {!hasSidebar && <Box sx={{ height: layout === "header-band" ? "25%" : 8, bgcolor: layout === "header-band" ? accent : paper, borderBottom: layout === "header-band" ? 0 : `2px solid ${accent}`, p: layout === "header-band" ? "6%" : 0 }}>
        {layout === "header-band" && <><Box sx={{ width: "42%", height: 5, bgcolor: "rgba(255,255,255,.9)", mb: 0.75 }} /><Box sx={{ width: "30%", height: 2.5, bgcolor: "rgba(255,255,255,.65)" }} /></>}
      </Box>}
      <Box sx={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: hasSidebar ? (sidebarRight ? "1fr 32%" : "32% 1fr") : "1fr" }}>
        {hasSidebar && !sidebarRight ? side : null}{body}{hasSidebar && sidebarRight ? side : null}
      </Box>
    </Box>
  );
}