import { useRef } from 'react';
import { IconVideo, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Button } from '../../../baseComp';
import { View } from 'tuikit-atomicx-react/chat';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { useChatUIState } from '../../../context/useChatUIState';
import { useMessageInputContext } from '../MessageInputContext';
import classes from './AttachmentPicker.module.scss';

type VideoPickerProps = {
  label?: string | undefined;
  iconSize?: number | undefined;
  onClose?: () => void;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
  disabled?: boolean | undefined;
};

const PICKER_CONSTANTS = {
  ACCEPT_TYPE: '.mp4,.mov,.qt',
};

export const VideoPicker = ({
  label,
  onClose,
  className,
  style,
  disabled = false,
}: VideoPickerProps) => {
  const { t } = useUIKit();
  const { sendMessage } = useChatContext();
  const { enableReadReceipt } = useChatUIState();
  const { setOfflinePushInfo } = useMessageInputContext();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) {
      return;
    }

    const payload = { type: 'videoMessage' as const, file, duration: 0 };
    const offlinePushInfo = setOfflinePushInfo?.(payload);
    const option = {
      ...(offlinePushInfo ? { offlinePushInfo } : {}),
      ...(enableReadReceipt !== undefined ? { needReadReceipt: enableReadReceipt } : {}),
    };
    sendMessage(payload, Object.keys(option).length > 0 ? option : undefined)
      .catch((error) => {
        Toast.error({ message: String(error) });
      });
    e.target.value = '';
    onClose?.();
  };
  return (
    <>
      {label
        ? (
          <Button
            title={t('MessageInput.video')}
            className={cs(classes['attachment-picker__popup-button'], { [classes['attachment-picker__popup-button--disabled']]: disabled }, className)}
            style={style}
            onClick={() => {
              if (disabled) return;
              fileInputRef.current?.click();
            }}
          >
            <IconVideo
              className={classes['attachment-picker__popup-button-icon']}
              size="28px"
            />
            <View>{label}</View>
          </Button>
        )
        : (
          <View>
            <IconVideo
              title={t('MessageInput.video')}
              className={cs(classes['attachment-picker__single-button'], { [classes['attachment-picker__single-button--disabled']]: disabled }, className)}
              style={style}
              size="28px"
              onClick={() => {
                if (disabled) return;
                fileInputRef.current?.click();
              }}
            />
          </View>
        )}
      <input
        type="file"
        accept={PICKER_CONSTANTS.ACCEPT_TYPE}
        ref={fileInputRef}
        hidden
        onChange={handleFileInput}
      />
    </>
  );
};