import { useState } from 'react';

import { Stack } from '@mui/material';
import { IconUpload } from '@tabler/icons-react';

import ActionButton from '../../components/ActionButton';
import { useTextArea } from '../../context';
import { isMediaActive } from '../../utils/mediaNode';

import UploadVideoModal, { type UploadVideoModalProps } from './modal';

export type UploadVideoProps = {
  title: string;
  uploaderProps?: UploadVideoModalProps['uploaderProps'];
};

const UploadVideo = ({ title, uploaderProps }: UploadVideoProps) => {
  const { editor } = useTextArea();
  const [open, setOpen] = useState(false);

  if (!editor) {
    return null;
  }

  return (
    <Stack>
      {!!uploaderProps && (
        <UploadVideoModal
          open={open}
          onClose={() => setOpen(false)}
          uploaderProps={uploaderProps}
        />
      )}
      <ActionButton
        title={title}
        icon={<IconUpload />}
        onClick={() => setOpen(true)}
        isActive={isMediaActive(editor, 'video')}
        disabled={!uploaderProps || editor.isActive('code')}
      />
    </Stack>
  );
};

export default UploadVideo;