import { useState } from 'react';

import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme } from '@material-hu/mui/styles';
import ToggleButton from '@material-hu/mui/ToggleButton';
import ToggleButtonGroup from '@material-hu/mui/ToggleButtonGroup';

import Actions from 'src/pages/dashboard/Acknowledgements/components/Stats/Actions';
import ColaboratorStats from 'src/pages/dashboard/Acknowledgements/components/Stats/ColaboratorStats';
import GeneralStats from 'src/pages/dashboard/Acknowledgements/components/Stats/GeneralStats';
import { StatsTypes } from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';

type TabItem = {
  value: StatsTypes;
  label: string;
  Content: React.FC;
};

const toggleButtonStyles: SxProps<Theme> = {
  '&:not(.Mui-selected)': {
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.12)',
    },
    backgroundColor: 'rgba(0, 0, 0, 0.08)',
  },
  border: '0px',
  borderRadius: '16px !important',
  p: '7px 10px',
  mr: 2,
  fontSize: '13px',
  lineHeight: '18px',
  height: '34px',
  textTransform: 'none',
};

const Stats = () => {
  const [currentTab, setCurrentTab] = useState(0);
  const { t } = useLokaliseTranslation('acknowledgements');

  const tabs: TabItem[] = [
    {
      value: StatsTypes.FOR_COLLABORATOR,
      label: t(`stats.${StatsTypes.FOR_COLLABORATOR}`),
      Content: ColaboratorStats,
    },
    {
      value: StatsTypes.GENERAL,
      label: t(`stats.${StatsTypes.GENERAL}`),
      Content: GeneralStats,
    },
  ];

  const handleChangeTab = (_event: React.SyntheticEvent, value: string) => {
    if (!value) return;
    setCurrentTab(tabs.findIndex(tab => tab.value === value));
  };

  const { value, Content } = tabs[currentTab];

  return (
    <Stack sx={{ gap: 3 }}>
      <Stack
        sx={{
          gap: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        <ToggleButtonGroup
          color="primary"
          exclusive
          value={value}
          onChange={handleChangeTab}
          aria-label={t('stats.stats_tabs_label')}
        >
          {tabs.map(tab => (
            <ToggleButton
              key={tab.value}
              value={tab.value}
              sx={toggleButtonStyles}
            >
              {tab.label}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <Actions />
      </Stack>
      <Content />
    </Stack>
  );
};

export default Stats;