import React, { FC, useState } from 'react';
import { useResizeDetector } from 'react-resize-detector';

import { ColorTokens } from '../../foundation/Colors';
import { TypographyTokens } from '../../foundation/Typography';
import { ToggleCaret } from '../ToggleCaret';
import { Pet } from './Pet';
import { ReactComponent as ExpandSVG } from './resources/expand.svg';
import { ReactComponent as NonExpandSVG } from './resources/notexpanded.svg';
import {
  BorderLine,
  ComponentBox,
  TabPillsBox,
  TabsAndComponentBox,
  TabsBox,
  TabStyled,
  ToggleCaretsWrapper,
} from './Tabs.styled';

type TabProps = {
  Component?: React.FunctionComponent | null;
  disabled?: boolean;
  id: string;
  label: string;
};

type TabsResponsivenessStateConfig = {
  allowExpansion: boolean;
  allowHiding: boolean;
  isInitiallyExpanded: boolean;
  isInitiallyHidden: boolean;
};

export type TabsProps = {
  activeTabColorToken: ColorTokens;
  activeTabId?: TabProps['id'] | null;
  backgroundColorToken: ColorTokens;
  borderColorToken: ColorTokens;
  colorToken: ColorTokens;
  hoverTabColorToken?: ColorTokens;
  onTabChange?: (id: TabProps['id']) => void;
  onTabsExpand?: (isExpanded: boolean) => void;
  onTabsHide?: (isHidden: boolean) => void;
  tabs: TabProps[];
  tabsResponsivenessStateConfig?: Partial<TabsResponsivenessStateConfig>;
  typographyToken: TypographyTokens;
};

export const Tabs: FC<TabsProps> = ({
  backgroundColorToken,
  activeTabColorToken,
  borderColorToken,
  typographyToken,
  colorToken,
  tabs,
  activeTabId,
  onTabChange,
  tabsResponsivenessStateConfig = {
    allowExpansion: false,
    allowHiding: false,
    isInitiallyExpanded: false,
    isInitiallyHidden: false,
  },
  onTabsExpand,
  onTabsHide,
  hoverTabColorToken,
}) => {
  const { isInitiallyExpanded, isInitiallyHidden, allowExpansion, allowHiding } =
    tabsResponsivenessStateConfig;

  const [{ isExpanded, isHidden }, setTabsResponsivenessState] = useState({
    isExpanded: isInitiallyExpanded ?? false,
    isHidden: isInitiallyHidden ?? false,
  });

  const { height: tabBoxHeight = 0, ref } = useResizeDetector({
    handleHeight: true,
  });
  const activeTab = tabs.find((tab) => tab.id === activeTabId);

  const toggleTabsResponsivenessStateConfig = (type: 'expand' | 'hide') => {
    setTabsResponsivenessState((previousState) => {
      let newState;

      if (type === 'expand') {
        const newIsExpanded = previousState.isHidden ? false : !previousState.isExpanded;
        newState = {
          isExpanded: newIsExpanded,
          isHidden: false,
        };
        onTabsExpand?.(newIsExpanded);
      } else {
        const newIsHidden = previousState.isExpanded ? false : !previousState.isHidden;
        newState = {
          isExpanded: false,
          isHidden: newIsHidden,
        };
        onTabsHide?.(newIsHidden);
      }

      return newState;
    });
  };

  const renderToggleButton = ({
    isOpen,
    iconType,
    onClick,
  }: {
    iconType: 'expand' | 'hide';
    isOpen: boolean;
    onClick: () => void;
  }) => {
    const isHideType = iconType === 'hide';
    return (
      <TabStyled
        activeTabColorToken={colorToken}
        backgroundColorToken={backgroundColorToken}
        borderColorToken={borderColorToken}
        colorToken={colorToken}
        hoverTabColorToken={hoverTabColorToken || activeTabColorToken}
        isActive={true}
        typographyToken={typographyToken}
        onClick={onClick}
      >
        {isHideType ? (
          <ToggleCaret arrowColor={isOpen ? 'white100' : undefined} isOpen={isOpen} />
        ) : isOpen ? (
          <ExpandSVG height={12} width={12} />
        ) : (
          <NonExpandSVG height={12} width={12} />
        )}
      </TabStyled>
    );
  };

  return (
    <TabsAndComponentBox data-testid="Tabs-TabsAndComponentBox">
      <TabsBox ref={ref} data-testid="Tabs-TabsBox">
        <BorderLine borderColorToken={borderColorToken} data-testid="Tabs-BorderLine" />
        <TabPillsBox data-testid="Tabs-TabPillsBox">
          {tabs.map(({ id, label, disabled }) => (
            <TabStyled
              key={id}
              activeTabColorToken={activeTabColorToken}
              backgroundColorToken={backgroundColorToken}
              borderColorToken={borderColorToken}
              colorToken={colorToken}
              data-testid={`Tabs-TabStyled-${id}`}
              disabled={Boolean(disabled)}
              hoverTabColorToken={hoverTabColorToken || activeTabColorToken}
              isActive={activeTabId === id}
              typographyToken={typographyToken}
              onClick={disabled ? undefined : () => onTabChange && onTabChange(id)}
            >
              {label}
              {activeTabId === id && <Pet />}
            </TabStyled>
          ))}
        </TabPillsBox>
        <ToggleCaretsWrapper>
          {allowExpansion &&
            renderToggleButton({
              iconType: 'expand',
              isOpen: isExpanded,
              onClick: () => toggleTabsResponsivenessStateConfig('expand'),
            })}
          {allowHiding &&
            renderToggleButton({
              iconType: 'hide',
              isOpen: isHidden,
              onClick: () => toggleTabsResponsivenessStateConfig('hide'),
            })}
        </ToggleCaretsWrapper>
      </TabsBox>
      {activeTab && activeTab.Component && (
        <ComponentBox data-testid="Tabs-ComponentBox" hidden={isHidden} tabBoxHeight={tabBoxHeight}>
          <activeTab.Component />
        </ComponentBox>
      )}
    </TabsAndComponentBox>
  );
};