import React, { useState } from "react";
import { keysTheme, theme } from "data/dataMx";
import { TabContainer, TabMenuContainer, TabMenuParent } from "./styles";
import { AtomIcon } from "native/atoms/Icon";
import { ISize } from "native/atoms/Typography/TypographyProps";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { AtomButtonIcon } from "native/atoms/Buttons/Icon";
import { TouchableWithoutFeedback } from "react-native";

export interface ITab {
  id: string;
  text: string;
  iconName?: string;
}

export interface ITabMenuProps {
  /** List of tabs to be shown text and icon includes ID, Tab Text and Icon name of each tab */
  tabs: Array<ITab>;
  /** Width of the tabs */
  tabsWidth?: string;
  /** Height of the tabs */
  tabHeight?: string;
  /** the Id of the tab that shoud be selected on component load */
  starterSelectedTab?: string;
  /** The color that is shown when a tab is selected */
  selectedColor?: keysTheme;
  /** If true ttab text and icon would be colored when selected */
  shouldColorLabel?: boolean;
  /** The size of the Icon */
  iconsSize?: number;
  /** The size of the tab's text */
  labelsSize?: ISize;
  /** Callback when a tab is selected */
  onTabSelected: (selectedTab: string) => void;
  /** If true Filter button will be shown */
  withFilter?: boolean;
  /** If true change colors and border */
  isSubMenu?: boolean;
  /** space between taps */
  space?: string;
  /** Callback used to whatever is needed when clicking the filter button */
  onFilterClicked?: () => void;
}

export const MoleculeTabMenu = ({
  tabs,
  selectedColor = "primary",
  shouldColorLabel = false,
  tabsWidth = "120px",
  tabHeight = "68px",
  iconsSize = 20,
  labelsSize = "large",
  starterSelectedTab = "",
  onTabSelected,
  withFilter = false,
  onFilterClicked,
  isSubMenu = false,
  space = "0",
}: ITabMenuProps) => {
  const [selectedTab, setSelectedTab] = useState<string>(starterSelectedTab);

  const colorTab = (tab: ITab, type: "text" | "icon"): keysTheme => {
    if (isSubMenu) {
      return selectedTab === tab.id && type === "text"
        ? "neutral700"
        : "neutral600";
    } else {
      return selectedTab === tab.id && shouldColorLabel
        ? selectedColor
        : "neutral700";
    }
  };

  return (
    <TabMenuParent>
      <TabMenuContainer>
        {tabs.map((tab: ITab) => (
          <TouchableWithoutFeedback
            key={`${tab.id}-${tab.text}`}
            onPress={() => {
              setSelectedTab(tab.id);
              onTabSelected(tab.id);
            }}
          >
            <TabContainer
              tabWidth={tabsWidth}
              tabHeight={tabHeight}
              borderColor={theme[selectedColor]}
              isSelected={selectedTab === tab.id}
              isSubMenu={isSubMenu}
              space={space}
            >
              {!!tab.iconName && (
                <AtomIcon
                  name={tab.iconName}
                  size={iconsSize || 15}
                  color={colorTab(tab, "icon")}
                />
              )}
              <AtomHeadline
                text={tab.text}
                size={labelsSize || "small"}
                weight="light"
                color={colorTab(tab, "text")}
                styles={{
                  marginLeft: `${tab.iconName ? "10px" : "0px"}`,
                }}
              />
            </TabContainer>
          </TouchableWithoutFeedback>
        ))}
      </TabMenuContainer>

      {withFilter ? (
        <AtomButtonIcon
          testID="filter-btn"
          disabled={false}
          onPress={onFilterClicked}
          color="custom"
          icon="tune"
          iconAlign="left"
          customColor="neutral"
          shape="default"
          text={"Filter"}
          width={"75px"}
        />
      ) : null}
    </TabMenuParent>
  );
};
