import { FC } from "react";
import { SectionHeaderWrapper, TextBold, TextWrapper } from "./Sections.styles";
import { Aligment, Button, Icon, Text, TextHeader } from "venice-ui";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { Colors } from "../../untils/Theme";
import { useStoreState } from "../../store";

interface ISectionHeaderProps {
  title: string;
  actionLabel: string;
  sectionTitle: string;
  revision: number;
  activeTab: string;
  handleBack: () => void;
  handleClick: () => void;
  handleEditSection?: () => void;
  handleNewRevision?: () => void;
}
export const SectionHeader: FC<ISectionHeaderProps> = ({
  title,
  handleBack,
  handleClick,
  handleEditSection,
  handleNewRevision,
  actionLabel,
  sectionTitle,
  revision,
  activeTab,
}) => {
  const { orgRole } = useStoreState((state) => state.user.userDetails);
  const isReadOnly = orgRole === "readOnly";
  return (
    <SectionHeaderWrapper>
      <Aligment align="center" direction="row" width="100%;">
        <Aligment align="center" direction="row" width="auto" gap={8}>
          {handleBack && (
            <Icon name="back_arrow" onClick={() => handleBack()} />
          )}
          <Aligment align="center" direction="row" width="auto" gap={32}>
            <TextWrapper>
              <Text>{t(dictionary.project)}</Text>
              <TextBold>{title}</TextBold>
            </TextWrapper>
            <TextWrapper>
              <Text>{t(dictionary.section)}</Text>
              <TextBold>{sectionTitle}</TextBold>
              <Icon
                name="edit"
                size={"md"}
                onClick={handleEditSection}
                tooltip={t(dictionary.editSection)}
                isDisabled={isReadOnly}
              />
            </TextWrapper>
            <TextWrapper>
              <Text>{t(dictionary.revision)}</Text>
              <TextBold>{revision}</TextBold>
              {activeTab === "map" && (
                <Icon
                  name="add"
                  size={"sm"}
                  onClick={handleNewRevision}
                  tooltip={t(dictionary.newRevision)}
                  isDisabled={isReadOnly}
                />
              )}
            </TextWrapper>
          </Aligment>
        </Aligment>
        <Button mode="ghost" text={actionLabel} onClick={() => handleClick()} />
      </Aligment>
    </SectionHeaderWrapper>
  );
};