import { useState } from 'react';

import Box from '@material-hu/mui/Box';
import Tab from '@material-hu/mui/Tab';
import Tabs from '@material-hu/mui/Tabs';

import { PeopleExperience } from '@material-hu/components/composed-components/peopleExperience';

import { useLokaliseTranslation } from 'src/utils/i18n';

import EnpsCommentList from './EnpsCommentList';
import EnpsSummary from './EnpsSummary';

const { ResultContainer } = PeopleExperience;

type TabPanelProps = {
  children?: React.ReactNode;
  index: number;
  value: number;
};

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`enps-tabpanel-${index}`}
      aria-labelledby={`enps-tab-${index}`}
      {...other}
    >
      <Box sx={{ p: 1, display: value === index ? 'block' : 'none' }}>
        {children}
      </Box>
    </div>
  );
}

const getAccessibilityProps = (index: number) => {
  return {
    id: `enps-tab-${index}`,
    'aria-controls': `enps-tabpanel-${index}`,
  };
};

const EnpsTab = () => {
  const { t } = useLokaliseTranslation('people_experience');
  const [value, setValue] = useState(0);

  const handleChangeTab = (_event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <ResultContainer title={t('e_nps.title')}>
      <Box
        sx={{
          borderBottom: 2,
          borderColor: theme => theme.palette.new.border.neutral.divider,
        }}
      >
        <Tabs
          value={value}
          aria-label={t('E_NPS_TABS')}
          onChange={handleChangeTab}
        >
          <Tab
            label={t('SUMMARY')}
            sx={{ px: 2 }}
            {...getAccessibilityProps(0)}
          />
          <Tab
            label={t('comment.comments')}
            sx={{ px: 2 }}
            {...getAccessibilityProps(1)}
          />
        </Tabs>
      </Box>
      <CustomTabPanel
        value={value}
        index={0}
      >
        <EnpsSummary />
      </CustomTabPanel>
      <CustomTabPanel
        value={value}
        index={1}
      >
        <EnpsCommentList />
      </CustomTabPanel>
    </ResultContainer>
  );
};

export default EnpsTab;
