import React from 'react';
import { styled } from '@mui/material/styles';
import { TabsProps } from '@mui/material/Tabs';

import { Tab, Tabs } from '@mui/material';
import { ColorVariant } from '@/types';
import { palette } from '../../helpers';

const colorMap: Record<ColorVariant, string> = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
};

interface StyledTabProps {
  label: string;
  color: ColorVariant;
}

export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }> = styled(Tabs)<{
  color: ColorVariant;
}>(({ color }) => ({
  borderBottom: '1px solid #e8e8e8',
  '& .Mui-selected': {
    color: colorMap[color],
  },
  '& .MuiTabs-indicator': {
    backgroundColor: colorMap[color],
  },
  '& .MuiButtonBase-root': {
    textTransform: 'none',
  },
}));

export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: StyledTabProps) => (
  <Tab disableRipple {...props} />
))(({ theme, color }) => ({
  textTransform: 'none',
  fontWeight: theme.typography.fontWeightRegular,
  fontSize: theme.typography.pxToRem(15),
  marginRight: theme.spacing(1),
  color: '#666666',
  padding: '5px 15px',
  top: '5px',
  minWidth: '60px',
  '&.Mui-selected': {
    color: colorMap[color],
  },
  '&.Mui-focusVisible': {
    backgroundColor: 'rgba(100, 95, 228, 0.32)',
  },
}));