import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps, type TabProps } from '@mui/material';

import { styled } from '../Theme';

const PREFIX = 'index';

const classes = {
  tabs: `${PREFIX}-tabs`,
  tab: `${PREFIX}-tab`,
};

const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
  [`& .${classes.tabs}`]: {},

  [`& .${classes.tab}`]: {
    fontSize: '0.875rem',
    [theme.breakpoints.up('md')]: {
      fontSize: '1rem',
    },
  },
}));

interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
  current: any;
  onChange: (value: string) => void;
  iconPosition?: TabProps['iconPosition'];
  enableTabClick?: boolean;
}

function CardTabs({
  tabs,
  current,
  onChange,
  iconPosition = undefined,
  enableTabClick = false,
  ...rest
}: CardTabsProps) {
  return (
    <MuiTabs
      scrollButtons="auto"
      value={current}
      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
      {...rest}
      variant="scrollable"
      sx={{
        minHeight: 'auto',
        '.MuiTabs-scrollButtons.Mui-disabled': {
          opacity: 0.3,
          cursor: 'not-allowed',
          pointerEvents: 'auto',
        },
        '.MuiTabs-scroller': {
          borderRadius: '100vw',
        },
        '.MuiTabs-flexContainer': {
          borderRadius: '100vw',
          backgroundColor: 'grey.100',
          padding: 0.5,
          display: 'inline-flex',
          columnGap: 0.25,
          maxWidth: '100%',
          overflowX: 'auto',
        },
        '.MuiTab-root': {
          borderRadius: '100vw',
          border: '1px solid transparent',
          minHeight: 'auto',
          lineHeight: 1,
          py: 1,
          color: 'text.secondary',
          fontSize: '13px',
          fontWeight: 'normal',
          textTransform: 'capitalize',
          transition: 'background-color 0.2s ease',
          '&.Mui-selected, &:hover': {
            backgroundColor: 'action.selected',
            borderColor: 'grey.100',
            color: 'grey.A700',
          },
        },
        '.MuiTabs-indicator': {
          display: 'none',
        },
        ...rest.sx,
      }}>
      {tabs.map((x) => (
        <MuiTab
          className={classes.tab}
          key={x.value}
          value={x.value}
          label={x.label}
          icon={x.icon}
          iconPosition={iconPosition}
          onClick={() => enableTabClick && onChange(x.value)}
        />
      ))}
    </MuiTabs>
  );
}

interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
  current: any;
  onChange: (value: string) => void;
  iconPosition?: TabProps['iconPosition'];
  enableTabClick?: boolean;
}

function LineTabs({
  tabs,
  current,
  onChange,
  iconPosition = undefined,
  enableTabClick = false,
  ...rest
}: LineTabsProps) {
  return (
    <MuiTabs
      scrollButtons="auto"
      value={current}
      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
      {...rest}
      variant="scrollable"
      sx={{
        minHeight: 'auto',
        '.MuiTabs-scrollButtons.Mui-disabled': {
          opacity: 0.3,
          cursor: 'not-allowed',
          pointerEvents: 'auto',
        },
        '.MuiTabs-scroller':
          rest.orientation !== 'vertical'
            ? {
                '&::after': {
                  content: '""',
                  display: 'block',
                  position: 'sticky',
                  left: 0,
                  zIndex: -1,
                  width: '100%',
                  height: '1px',
                  backgroundColor: 'grey.300',
                },
              }
            : {},
        '.MuiTabs-flexContainer': {
          display: 'inline-flex',
          columnGap: 2.5,
          px: 0,
          pb: 0.5,
        },
        '.MuiTab-root': {
          border: '1px solid transparent',
          minHeight: 'auto',
          lineHeight: 1,
          py: 1,
          px: 0,
          color: 'text.secondary',
          fontSize: '14px',
          fontWeight: 500,
          textTransform: 'capitalize',
          minWidth: 'auto',
          '&.Mui-selected, &:hover': {
            color: 'primary.main',
          },
        },
        '.MuiTabs-indicator': {
          height: '1px',
          backgroundColor: 'primary.main',
        },
        ...rest.sx,
      }}>
      {tabs.map((x) => (
        <MuiTab
          className={classes.tab}
          key={x.value}
          value={x.value}
          label={x.label}
          icon={x.icon}
          iconPosition={iconPosition}
          onClick={() => enableTabClick && onChange(x.value)}
        />
      ))}
    </MuiTabs>
  );
}

interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
  current: any;
  onChange: (value: string) => void;
  variant?: 'card' | 'line' | MuiTabsProps['variant'];
  iconPosition?: TabProps['iconPosition'];
  enableTabClick?: boolean; // 是否启用点击切换 tab，默认不启用，启用后，当前 tab 处于活跃状态下点击 tab 也会触发 onChange 事件，
}

export default function Tabs({
  tabs,
  current,
  onChange,
  variant = undefined,
  iconPosition = undefined,
  enableTabClick = false,
  ...rest
}: TabsProps) {
  if (variant === 'card') {
    return (
      <CardTabs
        {...rest}
        tabs={tabs}
        current={current}
        enableTabClick={enableTabClick}
        onChange={onChange}
        iconPosition={iconPosition}
      />
    );
  }

  if (variant === 'line') {
    return (
      <LineTabs
        {...rest}
        tabs={tabs}
        current={current}
        enableTabClick={enableTabClick}
        onChange={onChange}
        iconPosition={iconPosition}
      />
    );
  }

  return (
    <StyledMuiTabs
      scrollButtons="auto"
      variant="scrollable"
      value={current}
      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
      indicatorColor="primary"
      {...rest}
      className={[classes.tabs, rest.className || ''].join(' ')}>
      {tabs.map((x) => (
        <MuiTab
          className={classes.tab}
          key={x.value}
          value={x.value}
          label={x.label}
          icon={x.icon}
          iconPosition={iconPosition}
          onClick={() => enableTabClick && onChange(x.value)}
        />
      ))}
    </StyledMuiTabs>
  );
}
