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

import { ColorTokens } from '../../../foundation/Colors';
import { TypographyTokens } from '../../../foundation/Typography';
import {
  BorderLine,
  ComponentBox,
  TabPillsBox,
  TabsAndComponentBox,
  TabsBox,
  TabStyled,
} from './Tabs.styled';

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

export type MobileTabsProps = {
  activeTabColorToken: ColorTokens;
  activeTabId?: TabProps['id'] | null;
  backgroundColorToken: ColorTokens;
  borderColorToken: ColorTokens;
  colorToken: ColorTokens;
  hoverTabColorToken?: ColorTokens;
  onTabChange: (id: TabProps['id']) => void;
  tabs: TabProps[];
  typographyToken: TypographyTokens;
};

export const MobileTabs: React.FunctionComponent<MobileTabsProps> = ({
  backgroundColorToken,
  activeTabColorToken,
  borderColorToken,
  typographyToken,
  colorToken,
  tabs,
  activeTabId,
  onTabChange,
  hoverTabColorToken,
}) => {
  const { height: tabBoxHeight = 0, ref } = useResizeDetector({
    handleHeight: true,
  });
  const activeTab = tabs.find((tab) => tab.id === activeTabId);

  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(id)}
            >
              {label}
            </TabStyled>
          ))}
        </TabPillsBox>
      </TabsBox>
      {activeTab && activeTab.Component ? (
        <ComponentBox data-testid="Tabs-ComponentBox" tabBoxHeight={tabBoxHeight}>
          <activeTab.Component />
        </ComponentBox>
      ) : null}
    </TabsAndComponentBox>
  );
};