import React, { FC } from "react";
import { useNavigate, useParams } from "react-router-dom";
import styled from "styled-components";
import { Aligment, Dropdown, Icon, Toggle } from "venice-ui";
import { IOptions } from "../../types/sectionTypes";
import { Tabs } from "../UI/Tabs";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";
import { Colors } from "../../untils/Theme";
import { zoomScale } from "./readerHelper";
import {
  MapHeaderWrapper,
  ZoomIcon,
  ZoomScale,
  ZoomSection,
} from "./Sections.styles";

const SectionWrapper = styled.div`
  display: flex;
`;
interface IMapHeaderProps {
  activeTab: string;
  setActiveTab: (value: string) => void;
  activePage: number;
  pageCount: number;
  resetSelection: () => void;
  scale: number;
  updateScale: (direction: string) => void;
  
}
export const MapHeader: FC<IMapHeaderProps> = ({
  activeTab = "map",
  setActiveTab,
  activePage,
  pageCount,
  resetSelection,
  scale,
  updateScale,
 
}) => {
  const navigate = useNavigate();
  const { sectionID, projectID } = useParams();

  const menuTabs = [
    {
      value: "map",
      label: t(dictionary.map),
    },
    {
      value: "list",
      label: t(dictionary.weldingLogSection),
    },
  ];
  const getPages = (count: number): IOptions[] => {
    const options = [];
    for (let i = 0; i < count; i++) {
      const obj = {
        label: (i + 1).toString(),
        value: i + 1,
      };
      options.push(obj);
    }
    return options;
  };

  const setPage = (name: string, value: number | string) => {
    resetSelection();
    navigate(`/project/${projectID}/${sectionID}/${value}`);
  };

  const isAvailableZoomOut = () => {
    let scaleIndex = zoomScale.findIndex((item) => item === scale);
    return scaleIndex > 0;
  };

  const isAvailableZoomIn = () => {
    let scaleIndex = zoomScale.findIndex((item) => item === scale);
    return scaleIndex < zoomScale.length - 1;
  };
  const formatScale = (scale: number): string => {
    const textScale = (scale * 100).toString();
    const splited = textScale.split(".");

    if (splited.length === 1) {
      return textScale;
    } else {
      return (scale * 100).toFixed(2);
    }
  };

  return (
    <MapHeaderWrapper>
      <Aligment justify="start-flex" width={"auto"} gap={32}>
        <Tabs tabs={menuTabs} activeValue={activeTab} onClick={setActiveTab} />
        {activeTab === "map" && (
          <>
            <ZoomSection>
              <ZoomScale>{formatScale(scale)}%</ZoomScale>
              <Icon
                name="zoom_in"
                onClick={() => updateScale("up")}
                size={"md"}
                isDisabled={!isAvailableZoomIn()}
                tooltip={t(dictionary.zoomInTooltip)}
              />

              <Icon
                name="zoom_out"
                size={"md"}
                onClick={() => updateScale("down")}
                isDisabled={!isAvailableZoomOut()}
                tooltip={t(dictionary.zoomOutTooltip)}
              />
              <Icon
                name="fit_to_screen"
                size={"md"}
                onClick={() => updateScale("fit")}
                tooltip={t(dictionary.fitToScreenTooltip)}
              />

              <Icon
                name="orginal_size"
                size={"md"}
                onClick={() => updateScale("reset")}
                tooltip={t(dictionary.originalSizeTooltip)}
              />
            </ZoomSection>
          </>
        )}
      </Aligment>
      {activeTab === "map" && (
        <>
          <Aligment width="auto" wrap="nowrap">
            {/* ToDo check and clear */}
            <SectionWrapper>
              <Dropdown
                label={t(dictionary.page)}
                labelPosition="left"
                size="sm"
                value={activePage}
                options={getPages(pageCount)}
                handleChange={setPage}
                name="pageSelector"
                componentWidth="70px"
              />
            </SectionWrapper>
          </Aligment>
        </>
      )}
    </MapHeaderWrapper>
  );
};