import ArrowBack from '@material-hu/icons/material/ArrowBack';
import Breadcrumbs from '@material-hu/mui/Breadcrumbs';
import IconButton from '@material-hu/mui/IconButton';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import * as animations from '@material-hu/utils/animations';

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

import FavDimensionIndex from './FavDimensionIndex';
import FavQuestionsList from './FavQuestionsList';

type FavDimensionViewProps = {
  onGoBack: () => void;
  dimension: Topic;
};

const FavDimensionView = ({ onGoBack, dimension }: FavDimensionViewProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const surveyId = useSurveyId();

  return (
    <Stack sx={{ animation: `${animations.fadeIn} 500ms`, p: 4 }}>
      <Stack sx={{ gap: 1 }}>
        <Breadcrumbs aria-label="breadcrumb">
          <Link
            underline="hover"
            component="button"
            onClick={onGoBack}
          >
            {t('FAVORABILITY_LIST')}
          </Link>
          <Link
            sx={theme => ({ color: theme.palette.new.text.neutral.lighter })}
            underline="none"
            component="span"
          >
            {dimension.title}
          </Link>
        </Breadcrumbs>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <IconButton
            onClick={onGoBack}
            edge="start"
          >
            <ArrowBack />
          </IconButton>
          <Typography variant="h5">{`${t('dimension_one')}: ${dimension.title}`}</Typography>
        </Stack>
      </Stack>
      <Stack
        sx={{
          p: 3,
          gap: 1,
          my: 4,
          borderRadius: 2,
          backgroundColor: theme => theme.palette.new.background.elements.brand,
        }}
      >
        <Typography variant="h6">{t('DIMENSION_FAVORABILITY')}</Typography>
        <FavDimensionIndex
          surveyId={surveyId}
          dimensionId={dimension.id}
        />
      </Stack>
      <Stack sx={{ gap: 2 }}>
        <FavQuestionsList
          surveyId={surveyId}
          dimensionId={dimension.id}
        />
      </Stack>
    </Stack>
  );
};

export default FavDimensionView;