import { Button, Icon } from '@chakra-ui/react';
import { useState } from 'react';

import { CheckIcon, EditUndoIcon } from '@/icons';
import { Clip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';

const TrashToast = ({
  clips,
  isTrashed,
  undoTrash: undoTrash,
}: {
  clips: Clip[];
  isTrashed: boolean;
  undoTrash: () => void;
}) => {
  const [undoCompleted, setUndoCompleted] = useState(false);

  const handleUndoTrash = async () => {
    if (!undoCompleted) {
      await undoTrash();
      setUndoCompleted(true);
    }
  };

  const clip = clips.length === 1 ? clips[0] : undefined;

  return (
    <div className='flex w-[320px] items-center justify-between rounded-md bg-accent-red p-4 text-white md:w-[475px]'>
      <div className='flex-1'>
        {' '}
        <span>
          {undoCompleted ? (
            <div className='flex items-center justify-center'>
              <div className='mb-2'> Your action has been undone.</div>
              <Icon as={CheckIcon} ml={2} mb={2} />
            </div>
          ) : (
            <>
              <span className='inline font-bold'>
                {!!clip ? getClipTitle(clip) : `${clips.length} clips`}
              </span>
              {isTrashed
                ? ` ${!!clip ? 'has' : 'have'} been moved to trash.`
                : ` ${!!clip ? 'has' : 'have'} been restored to your library.`}
            </>
          )}
        </span>
      </div>
      {!undoCompleted && (
        <Button bg='red.400' color='white' onClick={handleUndoTrash}>
          <div className='flex items-center'>
            <Icon as={EditUndoIcon} marginRight='2' />
            Undo
          </div>
        </Button>
      )}
    </div>
  );
};

export default TrashToast;