import { useState } from 'react';
import PropTypes from 'prop-types';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, OutlinedInput, InputAdornment, IconButton, Typography } from '@mui/material';
import ClearIcon from '@mui/icons-material/Clear';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import VideoEmbed, { isVideoUrl } from './video-embed';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function VideoDialog({
  setParams,
  onClose,
  params
}) {
  const {
    t
  } = useLocaleContext();
  const [inputUrl, setInputUrl] = useState('');
  const isDuplicated = inputUrl && params.blockletVideos.includes(inputUrl);
  const verifyUrl = isVideoUrl(inputUrl);
  const handleSave = () => {
    setParams(item => {
      const arr = [...item.blockletVideos];
      arr.push(inputUrl);
      return {
        ...item,
        blockletVideos: arr
      };
    });
    onClose();
  };
  return /*#__PURE__*/_jsxs(Dialog, {
    open: true,
    fullWidth: true,
    maxWidth: "sm",
    children: [/*#__PURE__*/_jsx(DialogTitle, {
      children: t('studio.videoDialogTitle')
    }), /*#__PURE__*/_jsxs(DialogContent, {
      children: [/*#__PURE__*/_jsx(OutlinedInput, {
        fullWidth: true,
        value: inputUrl,
        onChange: e => setInputUrl(e.target.value),
        placeholder: t('studio.videoInputLabel'),
        endAdornment: inputUrl ? /*#__PURE__*/_jsx(InputAdornment, {
          position: "end",
          children: /*#__PURE__*/_jsx(IconButton, {
            onClick: () => setInputUrl(''),
            children: /*#__PURE__*/_jsx(ClearIcon, {})
          })
        }) : null,
        error: isDuplicated
      }), isDuplicated && /*#__PURE__*/_jsx(Typography, {
        variant: "body2",
        color: "error",
        children: t('studio.duplicateVideo')
      }), /*#__PURE__*/_jsx(VideoEmbed, {
        url: inputUrl,
        style: {
          marginTop: '20px',
          borderRadius: '4px'
        }
      })]
    }), /*#__PURE__*/_jsxs(DialogActions, {
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: () => onClose(),
        children: t('studio.cancel')
      }), /*#__PURE__*/_jsx(Button, {
        disabled: !verifyUrl || isDuplicated,
        onClick: handleSave,
        children: t('studio.confirm')
      })]
    })]
  });
}
VideoDialog.propTypes = {
  onClose: PropTypes.func.isRequired,
  params: PropTypes.object.isRequired,
  setParams: PropTypes.func.isRequired
};
export default VideoDialog;