import { type FC, useCallback, useState } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { type GroupPost } from 'src/types/groups';
import { type Post } from 'src/types/posts';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import ShareDestinationSelector from './ShareDestinationSelector';
import ShareEditorStep from './ShareEditorStep';
import {
  SHARE_FORM_ID,
  SHARE_STEPS,
  type ShareDestination,
  type ShareStep,
} from './types';

type SharePageContentProps = {
  originalPost: Post | GroupPost;
  onSuccess: () => void;
  onCancel: () => void;
};

export const SharePageContent: FC<SharePageContentProps> = ({
  originalPost,
  onSuccess,
  onCancel,
}) => {
  const { t } = useTranslation(['post', 'general']);
  const [step, setStep] = useState<ShareStep>(SHARE_STEPS.DESTINATION);
  const [destination, setDestination] = useState<ShareDestination | null>(null);
  const [isEditorSubmitting, setIsEditorSubmitting] = useState(false);

  const handleEditorSubmittingChange = useCallback(
    (isSubmitting: boolean) => setIsEditorSubmitting(isSubmitting),
    [],
  );

  return (
    <Box
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        backgroundColor: theme => theme.palette.new.background.layout.default,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          px: 3,
          py: 2,
          backgroundColor: theme =>
            theme.palette.new.background.elements.default,
          borderBottom: theme =>
            `1px solid ${theme.palette.new.border.neutral.default}`,
          flexShrink: 0,
        }}
      >
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {t('post:share_post')}
        </Typography>
        <IconButton onClick={onCancel}>
          <IconX />
        </IconButton>
      </Stack>

      <Box
        sx={{
          flexGrow: 1,
          overflow: 'auto',
          py: 4,
        }}
      >
        <Container maxWidth="sm">
          {step === SHARE_STEPS.DESTINATION && (
            <ShareDestinationSelector
              selected={destination}
              authorName={getFullName(originalPost.user)}
              onSelect={setDestination}
            />
          )}

          {step === SHARE_STEPS.EDIT && destination && (
            <ShareEditorStep
              originalPost={originalPost}
              destination={destination}
              onSuccess={onSuccess}
              onSubmittingChange={handleEditorSubmittingChange}
            />
          )}
        </Container>
      </Box>

      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'center',
          bgcolor: theme => theme.palette.new.background.elements.grey,
          minHeight: '84px',
          flexShrink: 0,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            flex: 1,
            maxWidth: 'sm',
            px: 3,
            gap: 2,
          }}
        >
          <Button
            variant="secondary"
            size="large"
            disabled={isEditorSubmitting}
            onClick={
              step === SHARE_STEPS.DESTINATION
                ? onCancel
                : () => setStep(SHARE_STEPS.DESTINATION)
            }
          >
            {t('general:back')}
          </Button>

          {step === 'destination' && (
            <Button
              variant="primary"
              size="large"
              disabled={!destination}
              onClick={() => setStep(SHARE_STEPS.EDIT)}
            >
              {t('general:continue')}
            </Button>
          )}

          {step === SHARE_STEPS.EDIT && (
            <Button
              variant="primary"
              size="large"
              type="submit"
              form={SHARE_FORM_ID}
              loading={isEditorSubmitting}
            >
              {t('post:share_submit_label')}
            </Button>
          )}
        </Stack>
      </Stack>
    </Box>
  );
};

export default SharePageContent;