import { type FC, Fragment, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import Button from '@material-hu/mui/Button';
import CardMedia from '@material-hu/mui/CardMedia';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { styled, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import { onboardingRoutes } from 'src/pages/dashboard/onboarding/routes';
import { IconTypes } from 'src/types/icons';
import { type Category } from 'src/types/onboarding';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  canOpenCategory,
  getBorderRadiusOnCategoryImage,
  getWidthHeightOnCategoryImage,
  isCurrentStep,
} from 'src/utils/onboarding';

import AcceptCancelDialog from 'src/components/AcceptCancelDialog';
import { WidgetIcon } from 'src/components/dashboard/widgets/WidgetIcon';
import ProfilePicture from 'src/components/user/ProfilePicture';

export type OnboardingContentProps = {
  categories: Category[];
};

const CustomButton = styled(Button)({
  flex: '1 1 0%',
  flexDirection: 'column',
  '&:hover': {
    backgroundColor: '#f4f5f7',
  },
});

const OnboardingContent: FC<OnboardingContentProps> = props => {
  const { categories } = props;

  const [openDialogError, setOpenDialogError] = useState<boolean>(false);
  const { t } = useLokaliseTranslation('onboarding');
  const theme = useTheme();
  const navigate = useNavigate();
  const { user } = useAuth();

  const navigateToCategory = (category: Category, index: number) => {
    const { id } = category;
    if (canOpenCategory(categories, index)) {
      navigate(onboardingRoutes.category(id));
    } else {
      setOpenDialogError(true);
    }
  };

  const closeDialog = () => {
    setOpenDialogError(false);
  };

  return (
    <Box
      sx={{
        display: 'flex',
        height: '100%',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Stack
        flexDirection="row"
        alignItems="center"
        sx={{
          width: 'inherit',
        }}
      >
        {categories?.map((category, index) => {
          const currentStep = isCurrentStep(categories, index);
          return (
            <Fragment key={category.id}>
              <Box
                sx={{
                  height: '250px',
                  display: 'flex',
                  width: 'inherit',
                  alignItems: 'flex-end',
                }}
              >
                <CustomButton
                  onClick={() => navigateToCategory(category, index)}
                >
                  {currentStep && (
                    <ProfilePicture
                      id={user?.id}
                      user={user!}
                      size="large"
                      sx={{
                        margin: '20px 0',
                        borderRadius: '50%',
                        '& svg': {
                          color: '#fff',
                        },
                      }}
                    />
                  )}
                  <Box
                    sx={{
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      width: '150px',
                      height: '150px',
                    }}
                  >
                    <CardMedia
                      component={WidgetIcon}
                      icon={category.icon}
                      height={getWidthHeightOnCategoryImage(category.icon)}
                      width={getWidthHeightOnCategoryImage(category.icon)}
                      objectFit={
                        category.icon.type === IconTypes.EMOJI
                          ? 'contain'
                          : 'cover'
                      }
                      borderRadius={getBorderRadiusOnCategoryImage(
                        category.icon,
                      )}
                    />
                  </Box>
                  <Typography
                    color="textPrimary"
                    variant="h6"
                    sx={{
                      mt: 1,
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {category.name}
                  </Typography>
                  <Typography
                    color="textSecondary"
                    sx={{
                      mt: 1,
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {t('pending_tasks', {
                      count: category.pendingTasks,
                    })}
                  </Typography>
                </CustomButton>
              </Box>
              <Divider
                sx={{
                  width: '300px',
                  borderWidth: '2px',
                  borderColor: category.alreadyDone
                    ? theme.palette.success.main
                    : undefined,
                  alignSelf: 'center',
                  '&:last-child': {
                    display: 'none',
                  },
                }}
                orientation="horizontal"
              />
            </Fragment>
          );
        })}
      </Stack>
      {openDialogError && (
        <AcceptCancelDialog
          open={openDialogError}
          title={t('error_invalid_category_title')}
          onAccept={closeDialog}
        >
          <Typography color="textPrimary">
            {t('error_invalid_category_description')}
          </Typography>
        </AcceptCancelDialog>
      )}
    </Box>
  );
};

export default OnboardingContent;