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

import Typography from '@material-hu/mui/Typography';

import HuDialog from '@material-hu/components/design-system/Dialog';

import { MAX_PINNED_MESSAGES } from 'src/pages/dashboard/Conversations/constants';
import { PinOptions } from 'src/pages/dashboard/Conversations/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TimerModal from '../../../shared/TimerModal';

type PinnedMessageModalProps = {
  title: string;
  description: string;
  options: { label: string; value: string }[];
  onClose: () => void;
  onSubmit: (option: string) => void;
  isLoading: boolean;
  primaryButtonLabel: string;
  pinnedMessagesCount: number;
};

const PinnedMessageModal: FC<PinnedMessageModalProps> = ({
  title,
  description,
  options,
  onClose,
  onSubmit,
  isLoading,
  primaryButtonLabel,
  pinnedMessagesCount,
}) => {
  const { t } = useLokaliseTranslation(['chat', 'general']);

  const [showReplaceConfirm, setShowReplaceConfirm] = useState(
    pinnedMessagesCount >= MAX_PINNED_MESSAGES,
  );

  if (showReplaceConfirm) {
    return (
      <HuDialog
        title={t('pin.replace_maximum_title')}
        primaryButtonProps={{
          children: t('general:continue'),
          onClick: () => setShowReplaceConfirm(false),
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: onClose,
        }}
        body={
          <Typography variant="globalS">
            {t('pin.replace_maximum_subtitle')}
          </Typography>
        }
        onClose={onClose}
      />
    );
  }

  return (
    <TimerModal
      title={title}
      description={description}
      options={options}
      onClose={onClose}
      onSubmit={onSubmit}
      isLoading={isLoading}
      primaryButtonLabel={primaryButtonLabel}
      defaultOption={PinOptions.ALWAYS}
    />
  );
};

export default PinnedMessageModal;