import React, { useCallback } from 'react';
import { Button } from 'components/button';
import { ScrollView, ScrollViewType } from 'components/layout';
import { useResponsiveLayout } from 'hooks';
import { ButtonColorVariant, ButtonType } from 'components';

export const Tabs: React.FC<TabsType> = ({
  activeTab,
  variant = 'default',
  tabs,
  setActiveTab,
  tabProps,
  activeTabProps,
  ...props
}) => {
  const { isMobile } = useResponsiveLayout();
  const my = isMobile ? undefined : 'xs';
  const inActiveVariant = variant === 'default' ? 'text' : 'underline-inactive';
  const activeVariant = variant === 'default' ? 'base' : 'underline';
  const shapeVariant = variant === 'default' ? 'round' : 'square';

  const getColorVariant = useCallback(
    (index) => {
      return (index === activeTab ? activeVariant : inActiveVariant) as ButtonColorVariant;
    },
    [activeTab, activeVariant, inActiveVariant]
  );

  const getTitleColor = useCallback(
    (index) => {
      return index === activeTab ? 'title' : 'body';
    },
    [activeTab]
  );

  const activeTabStyle = useCallback(
    (tabIndex) => {
      return tabIndex === activeTab ? activeTabProps : {};
    },
    [activeTab, activeTabProps]
  );
  return (
    <ScrollView
      showsHorizontalScrollIndicator={false}
      my={my}
      style={{
        maxHeight: 55,
      }}
      contentContainerStyle={{
        alignItems: 'center',
      }}
      horizontal
      {...props}
    >
      {tabs.map((tab) => (
        <Button
          key={tab.index}
          onPress={() => setActiveTab(tab.index)}
          shapeVariant={shapeVariant}
          colorVariant={getColorVariant(tab.index)}
          title={tab.title}
          titleVariant="caption"
          titleColor={getTitleColor(tab.index)}
          sizeVariant="small"
          underlayColorVariant="base"
          hoverColorVariant="base-02-hover"
          {...tabProps}
          {...activeTabStyle(tab.index)}
        />
      ))}
    </ScrollView>
  );
};

type TabsType = ScrollViewType & TabsProps;

type Tab = {
  title: string;
  index: number;
};
export interface TabsProps {
  activeTab: number;
  tabs: Tab[];
  variant: 'default' | 'underline';
  setActiveTab: (index: number) => void;
  tabProps?: ButtonType;
  activeTabProps?: ButtonType;
}