import { FC } from "react";
import { Aligment, Button, Icon, Selector, TextSmall } from "venice-ui";
import { Colors } from "../../untils/Theme";
import {
  DetailPanelSectionHeader,
  ModeChooseWraper,
  TextMode,
} from "./ItemDetailsPanel.styles";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import {
  ADDITIONAL_TYPES,
  TAdditionalType,
} from "../../definitions/additional";
import { IOptions } from "../../types/sectionTypes";
import { useStoreState } from "../../store";
import { useParams } from "react-router-dom";

interface IDetailsPanelHeader {
  type?: string;
  element?: any;
  editMode: boolean;
  drawMode: TAdditionalType;
  deselect: () => void;
  selectMode: (mode: TAdditionalType) => void;
  setActivePanelTab: (tab: string) => void;
  referal?: string;
  setReferal: (value: string) => void;
  activeTab: string;
}

export const DetailsPanelHeader: FC<IDetailsPanelHeader> = ({
  type,
  element,
  editMode,
  drawMode,
  deselect,
  selectMode,
  setActivePanelTab,
  referal,
  setReferal,
  activeTab,
}) => {
  const { orgRole } = useStoreState((state) => state.user.userDetails);
  const isEditable = orgRole !== "readOnly";
  const { elements } = useStoreState(
    (state) => state.projectDetails.projectDetails,
  );
  const { sectionID } = useParams();

  const drawModes = [
    {
      mode: ADDITIONAL_TYPES.dot,
      label: t(dictionary.dot),
      icon: "point",
    },
    {
      mode: ADDITIONAL_TYPES.edge,
      label: t(dictionary.edge),
      icon: "curve",
    },
    {
      mode: ADDITIONAL_TYPES.triage,
      label: t(dictionary.triage),
      icon: "triage",
    },
    {
      mode: ADDITIONAL_TYPES.cloud,
      label: t(dictionary.cloud),
      icon: "cloud",
    },
  ];

  const handleChangeTab = (tab: string) => {
    if (isEditable || (!isEditable && tab !== "elements")) {
      setActivePanelTab(tab);
    }
  };
  const getPointScope = (): IOptions[] => {
    let pointsScope: IOptions[] = [];
    elements
      .filter((_item) => _item.sectionID === sectionID)
      .forEach((element) => {
        let obj = {
          label: element.joint_name,
          value: element.id,
        };
        pointsScope.push(obj);
      });
    return pointsScope;
  };
  const setPoint = (name: string, value: number | string | undefined): void => {
    setReferal(value as string);
  };

  const modes = [
    {
      id: "joints",
      label: t(dictionary.joints),
      sub: t(dictionary.rightClikcToSetNewJoint),
    },
    {
      id: "spools",
      label: t(dictionary.spools),
      sub: t(dictionary.rightClikcToSetNewSpool),
    },
    {
      id: "elements",
      label: t(dictionary.elements),
      sub: t(dictionary.rightClikcToSetNewElement),
    },
  ];
  const showCheck = () => {
    if (type === "spool") {
      return false;
    } else {
      return !element;
    }
  };
  return (
    <>
      <DetailPanelSectionHeader>
        {modes.map(({ id, label, sub }) => (
          <ModeChooseWraper key={id} onClick={() => handleChangeTab(id)}>
            <TextMode
              isActive={activeTab === id}
              isDisabled={!isEditable && id === "elements"}
            >
              {label}
            </TextMode>
          </ModeChooseWraper>
        ))}
      </DetailPanelSectionHeader>

      {showCheck() ? (
        <>
          {isEditable && (
            <Aligment
              justify="flex-start"
              width="100%"
              gap={8}
              vPadding="8px"
              hPadding="16px"
            >
              <TextSmall>
                {modes.find((mode) => mode.id === activeTab)?.sub}
              </TextSmall>

              {editMode && (
                <Aligment justify="flex-start" width="100%" vPadding="4px">
                  <Aligment justify="flex-start" width="100%" gap={8}>
                    {drawModes.map(({ mode, label, icon }) => (
                      <Icon
                        key={mode}
                        name={icon}
                        color={
                          drawMode === mode ? Colors.white : Colors.appBlue
                        }
                        onClick={() => selectMode(mode as TAdditionalType)}
                        size={"md"}
                        hoverColor={
                          drawMode === mode ? Colors.white : Colors.seaBlue
                        }
                        hoverBackground={
                          drawMode === mode
                            ? Colors.primary_600
                            : 'transparent'
                        }
                        background={
                          drawMode === mode
                            ? Colors.primary_600
                            : 'transparent'
                        }
                        tooltip={label}
                      />
                    ))}
                  </Aligment>
                </Aligment>
              )}

              {activeTab === "joints" && (
                <Selector
                  name="referal"
                  label={referal ? t(dictionary.reference) : undefined}
                  labelPosition="left"
                  size="sm"
                  value={referal}
                  width="auto"
                  options={getPointScope()}
                  handleSelect={setPoint}
                  handleClear={() => setReferal("")}
                  optionalLabel={t(dictionary.referencePanelTitle)}
                  emptyStateText={t(dictionary.referencePanelEmpty)}
                  disabled={orgRole === "readOnly"}
                  placeholder={t(dictionary.setReference)}
                />
              )}
            </Aligment>
          )}
        </>
      ) : (
        <Aligment justify="flex-start" width="100%" vPadding="8px" hPadding="16px">
          <Button
            onClick={deselect}
            text={t(dictionary.backToList)}
            mode="secondary"
            size="sm"
          />
        </Aligment>
      )}
    </>
  );
};