import { useState } from "react";
import { PlusIcon } from "@heroicons/react/solid";

import { EditorType, IconType } from "@/types/editor";
import { Empty } from "@/components/empty";

import { IconSelected } from "./icon-selected";
import { FormattedMessage, useIntl } from "react-intl";

export const Icons = ({
  editor,
  onChange,
  onStep,
}: {
  editor: EditorType;
  onChange: (e: EditorType) => void;
  onStep: (step: number, multiple?: boolean) => void;
}) => {
  const [opened, setOpened] = useState<number | null>(0);
  const intl = useIntl();

  const handleChange = (index: number, icon: any) => {
    const newIcons = [...editor.icons];
    newIcons[index] = icon;
    onChange({
      ...editor,
      icons: newIcons,
    });
  };

  const handleDeleteIcon = (index: number) => {
    const newIcons = [...editor.icons];
    newIcons.splice(index, 1);
    onChange({
      ...editor,
      icons: newIcons,
    });
  };

  const handleChangeOrder = (index: number, value: number) => {
    const newIcons = [...editor.icons];
    const [removed] = newIcons.splice(index, 1);
    newIcons.splice(value, 0, removed);
    onChange({
      ...editor,
      icons: newIcons,
    });
  };

  return (
    <div className="grid grid-cols-1 gap-4">
      <p className="font-bold tracking-wider text-lg text-white">
        <FormattedMessage id="iconsEditor.editor.icons.title" />
      </p>
      {editor?.icons?.length > 0 ? (
        <>
          <div
            className="border-2 border-dark-300 border-dashed w-full rounded-lg pl-4 py-4 pr-6 group cursor-pointer transition-all duration-200 hover:border-blue group flex items-center justify-start"
            onClick={() => onStep(0, true)}
          >
            <div className="flex items-center justify-start gap-4">
              <div className="w-10 h-10 flex items-center justify-center bg-dark-200 bg-opacity-20 rounded-lg group-hover:bg-blue transition-all duration-200">
                <PlusIcon className="text-white w-6" />
              </div>
              <div>
                <p className="text-white font-semibold">
                  <FormattedMessage id="iconsEditor.editor.icons.add.title" />
                </p>
                <p className="text-xs text-dark-200">
                  <FormattedMessage id="iconsEditor.editor.icons.add.subtitle" />
                </p>
              </div>
            </div>
          </div>
          {editor?.icons?.map((icon: IconType, k) => {
            return (
              <IconSelected
                key={k}
                totalIcons={editor?.icons?.length}
                index={k}
                icon={icon}
                current={opened}
                setCurrent={setOpened}
                onDelete={handleDeleteIcon}
                onChange={handleChange}
                onChangeOrder={handleChangeOrder}
              />
            );
          })}
        </>
      ) : (
        <Empty
          title={intl.formatMessage({
            id: "iconsEditor.editor.icons.empty.title",
          })}
          description={intl.formatMessage({
            id: "iconsEditor.editor.icons.empty.subtitle",
          })}
          button={intl.formatMessage({
            id: "iconsEditor.editor.icons.empty.cta",
          })}
          action={() => onStep(0)}
        />
      )}
    </div>
  );
};