import { FC, ReactNode, useState } from 'react';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';

import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import {
  LoadingButton,
  LoadingButtonProps,
} from 'src/components/LoadingButton';

import ChatsSidebar from './ChatsSidebar';

export type Step = {
  id: string;
  title: string;
  children: ReactNode;
  buttonLabel?: string;
  buttonProps?: LoadingButtonProps;
};

export type ChatSidebarStepperProps = {
  onCancel?: () => void;
  onFinish?: () => void;
  onBack?: (step: Step, index: number) => void;
  onNext?: (step: Step, index: number) => void;
  steps: Step[];
};

const ChatSidebarStepper: FC<ChatSidebarStepperProps> = props => {
  const { steps, onCancel, onBack, onNext, onFinish } = props;

  const [active, setActive] = useState<number>(0);

  const { t } = useTranslation();

  const handleCancel = () => {
    onCancel && onCancel();
  };

  const handleFinish = () => {
    onFinish && onFinish();
  };

  const handleBack = (step: Step, index: number) => {
    setActive(index - 1);
    onBack && onBack(step, index);
  };

  const handleNext = (step: Step, index: number) => {
    setActive(index + 1);
    onNext && onNext(step, index);
  };

  const renderCancel = () => (
    <Tooltip title={t('CANCEL')}>
      <IconButton
        aria-label={t('CANCEL')}
        size="small"
        onClick={handleCancel}
      >
        <CloseIcon />
      </IconButton>
    </Tooltip>
  );

  const renderBack = (step: Step, index: number) => (
    <Tooltip title={t('BACK')}>
      <IconButton
        aria-label={t('BACK')}
        size="small"
        onClick={() => handleBack(step, index)}
      >
        <ArrowBackIcon />
      </IconButton>
    </Tooltip>
  );

  const activeStepIndex = steps.findIndex((step, index) => index === active);
  const activeStep = steps[activeStepIndex];

  const { id, title, children, buttonLabel, buttonProps = {} } = activeStep;

  return (
    <ChatsSidebar
      key={id}
      title={title}
      actionsPosition="start"
      actions={
        activeStepIndex === 0
          ? renderCancel()
          : renderBack(activeStep, activeStepIndex)
      }
    >
      {children}
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          py: 2,
        }}
      >
        <LoadingButton
          type="button"
          variant="contained"
          loadingPosition="start"
          {...buttonProps}
          onClick={() =>
            activeStepIndex < steps.length - 1
              ? handleNext(activeStep, activeStepIndex)
              : handleFinish()
          }
        >
          {activeStepIndex < steps.length
            ? buttonLabel || t('NEXT')
            : buttonLabel || t('FINISH')}
        </LoadingButton>
      </Box>
    </ChatsSidebar>
  );
};

export default ChatSidebarStepper;