import { useState } from 'react';

import ButtonGroup from '@material-hu/mui/ButtonGroup';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { PeopleExperience } from '@material-hu/components/composed-components/peopleExperience';
import * as PxTypes from '@material-hu/components/composed-components/peopleExperience/types';

import useSurveyId from '../hooks/useSurveyId';
import { Topic } from '../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FavDimensionList from './FavDimensionList';
import FavListIndex from './FavListIndex';
import FavQuestionsList from './FavQuestionsList';
import FilterButton from './FilterButton';

const { ResultContainer } = PeopleExperience;
type FavorabilityListDashboardProps = {
  onSelectDimension: (dimension: Topic) => void;
};

const FavorabilityListDashboard = ({
  onSelectDimension,
}: FavorabilityListDashboardProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const surveyId = useSurveyId();

  const [dataSource, setDataSource] = useState<PxTypes.DataSource>(
    PxTypes.DataSource.TOPICS,
  );

  const handleFilterBy = (nextDataSource: PxTypes.DataSource) => () =>
    setDataSource(nextDataSource);

  return (
    <ResultContainer title={t('FAVORABILITY_LIST')}>
      <Stack sx={{ gap: 2 }}>
        <Typography variant="h6">{t('FAVORABILITY_INDEX')}</Typography>
        <FavListIndex surveyId={surveyId} />
      </Stack>
      <Stack sx={{ gap: 2 }}>
        <Stack
          sx={{
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'space-between',
            gap: 2,
          }}
        >
          <ButtonGroup
            variant="outlined"
            aria-label={t('FILTER_BY_TYPE') as string}
          >
            <FilterButton
              isSelected={dataSource === PxTypes.DataSource.TOPICS}
              onClick={handleFilterBy(PxTypes.DataSource.TOPICS)}
              size="small"
              sx={{ borderRadius: 1 }}
            >
              {t('dimension_other')}
            </FilterButton>
            <FilterButton
              isSelected={dataSource === PxTypes.DataSource.QUESTIONS}
              onClick={handleFilterBy(PxTypes.DataSource.QUESTIONS)}
              size="small"
              sx={{ borderRadius: 1 }}
            >
              {t('question_other')}
            </FilterButton>
          </ButtonGroup>
        </Stack>
        {dataSource === PxTypes.DataSource.TOPICS && (
          <FavDimensionList
            surveyId={surveyId}
            onSelectDimension={onSelectDimension}
          />
        )}
        {dataSource === PxTypes.DataSource.QUESTIONS && (
          <FavQuestionsList surveyId={surveyId} />
        )}
      </Stack>
    </ResultContainer>
  );
};

export default FavorabilityListDashboard;
