import { FC } from "react";
import { FNAlign, FNLayout } from "../../../../../../utils/types/meta-fn";
import { AlignIcon } from "./LayoutIcon";
import { Tooltip } from "../../../../../../utils/ui/tooltip";

export const LayoutPacked: FC<{
  dir: FNLayout["dir"];
  align: FNAlign;
  onChange: (align: FNAlign) => void;
}> = ({ dir, align, onChange }) => {
  return (
    <div className="ml-1 w-[68px] h-[68px] p-[2px] border grid grid-cols-3 bg-white">
      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="top-left"
      />
      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="top-center"
      />
      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="top-right"
      />

      <AlignItem dir={dir} active={align} onChange={onChange} align="left" />
      <AlignItem dir={dir} active={align} onChange={onChange} align="center" />
      <AlignItem dir={dir} active={align} onChange={onChange} align="right" />

      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="bottom-left"
      />
      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="bottom-center"
      />
      <AlignItem
        dir={dir}
        active={align}
        onChange={onChange}
        align="bottom-right"
      />
    </div>
  );
};

const AlignItem: FC<{
  dir: FNLayout["dir"];
  align: FNAlign;
  active: string;
  onChange: (align: FNAlign) => void;
}> = ({ dir, align, active, onChange }) => {
  let pos = "start";

  if (dir.startsWith("col")) {
    if (align.endsWith("left")) pos = "start";
    if (align.endsWith("center")) pos = "center";
    if (align.endsWith("right")) pos = "end";
  } else {
    if (align.startsWith("top")) pos = "start";
    else if (align.startsWith("bottom")) pos = "end";
    else pos = "center";
  }

  return (
    <Tooltip content={`Align: ${align}`}>
      <div
        className={cx(
          "w-[21px] h-[21px] flex items-center justify-center cursor-pointer",
          active === align &&
            css`
              .icon {
                display: flex !important;
              }
              .point {
                display: none;
              }
            `,
          css`
            &:hover {
              .icon {
                display: flex !important;
                opacity: 0.5;
              }
              .point {
                display: none;
              }
            }
          `
        )}
        onClick={() => {
          onChange(align);
        }}
      >
        <AlignIcon
          dir={dir}
          pos={pos as any}
          className={cx(
            "icon",
            css`
              display: none;
            `
          )}
        />
        <div className="w-[2px] h-[2px] bg-slate-400 point"></div>
      </div>
    </Tooltip>
  );
};
