import { FC } from 'react';
import { useQuery } from 'react-query';

import ExpandMoreIcon from '@material-hu/icons/material/ExpandMore';
import Accordion from '@material-hu/mui/Accordion';
import AccordionDetails from '@material-hu/mui/AccordionDetails';
import AccordionSummary from '@material-hu/mui/AccordionSummary';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Dialog from '@material-hu/mui/Dialog';
import DialogContent from '@material-hu/mui/DialogContent';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { getFAQs } from 'src/services/recognitions';

import { recognitionsKeys } from '../queries';

export type FAQsDialogProps = {
  open: boolean;
  onClose: () => void;
};

export const FAQsDialog: FC<FAQsDialogProps> = props => {
  const { open, onClose } = props;

  const { t } = useTranslation();

  const { data: FAQsData, isLoading: isLoadingFAQs } = useQuery(
    [recognitionsKeys.faqs()],
    () => getFAQs(),
  );

  const FAQs = FAQsData?.data?.DataFAQs;

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
    >
      <DialogContent sx={{ p: 4 }}>
        {isLoadingFAQs && (
          <Box sx={{ textAlign: 'center' }}>
            <CircularProgress />
          </Box>
        )}
        {!isLoadingFAQs && (
          <Box>
            <Box>
              <Typography
                color="textPrimary"
                variant="h6"
              >
                {t('FREQUENT_QUESTIONS')}
              </Typography>
            </Box>
            <Divider sx={{ mt: 1, mb: 2 }} />
            <Box>
              {FAQs.map((FAQ, index) => (
                <Accordion key={index}>
                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                    <Typography sx={{ fontWeight: 500 }}>
                      {FAQ.question}
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography>{FAQ.answer}</Typography>
                  </AccordionDetails>
                </Accordion>
              ))}
            </Box>
          </Box>
        )}
      </DialogContent>
    </Dialog>
  );
};

export default FAQsDialog;