import { FC, useEffect, useState } from "react";
import { Aligment, Section, Text } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import {
  ListContentWrapper,
  ListWrapper,
  SettingsArea,
  SettinsMenu,
  SettinsMenuItem,
} from "./organizations.style";
import { SettingForms } from "./SettingForms/SettingForms";
import { useLocation } from "react-router-dom";
import { ContentWrapper } from "../components";

export const ListsSettings: FC = () => {
  const location = useLocation();
  const { listConfig } = location.state || {};

  const [activeState, setActiveState] = useState("listGlobal");

  useEffect(() => {
    if (listConfig) {
      setActiveState(listConfig);
    }
  }, [listConfig]);

  const formsList = [
    {
      id: "listGlobal",
      name: t(dictionary.mainWeldingLog),
      export: true,
    },
    {
      id: "listSection",
      name: t(dictionary.sectionWeldingLog),
      export: true,
    },
    {
      id: "jointDetail",
      name: t(dictionary.jointDetails),
    },
    {
      id: "projectList",
      name: t(dictionary.projectList),
    },
    {
      id: "addProjectForm",
      name: t(dictionary.addProjectForm),
    },
    {
      id: "sectionsList",
      name: t(dictionary.sectionsList),
    },
    {
      id: "addSectionForm",
      name: t(dictionary.addSectionForm),
    },
  ];
  const isExportable = () => {
    return formsList.find((_itme) => _itme.id === activeState)?.export || false;
  };
  return (
    <ListWrapper>
      <SettinsMenu>
        {formsList.map((_item) => (
          <SettinsMenuItem
            isActive={activeState === _item.id}
            key={_item.id}
            onClick={() => setActiveState(_item.id)}
          >
            {_item.name}
          </SettinsMenuItem>
        ))}
      </SettinsMenu>
      <SettingsArea>
        <ContentWrapper componentHeight="calc(100vh - 16.6rem)">
          <ListContentWrapper id='dupa'>
            <SettingForms
              configName={activeState}
              isExportable={isExportable()}
            />
          </ListContentWrapper>
        </ContentWrapper>
      </SettingsArea>
    </ListWrapper>
  );
};