import { useState } from 'react';
import type React from 'react';
import { useUIKit, IconAddCircle } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { Popup } from '../../../baseComp/Popup';
import classes from './AttachmentPicker.module.scss';
import { FilePicker } from './FilePicker';
import { ImagePicker } from './ImagePicker';
import { VideoPicker } from './VideoPicker';

interface AttachmentPickerProps {
  className?: string;
  style?: React.CSSProperties;
  attachmentPickerMode?: 'collapsed' | 'expanded';
  disabled?: boolean;
}

const ICON_SIZE = {
  COLLAPSED: 18,
  EXPANDED: 24,
};

function AttachmentPicker({ className, style = {}, attachmentPickerMode = 'collapsed', disabled = false }: AttachmentPickerProps) {
  const [anchor, setAnchor] = useState<Element | null>(null);
  const isCollapsed = attachmentPickerMode === 'collapsed';
  const { t, direction } = useUIKit();
  const getPickerItems = () => {
    const pickers = [
      { type: 'File', Component: FilePicker },
      { type: 'Image', Component: ImagePicker },
      { type: 'Video', Component: VideoPicker },
    ];

    return pickers.map(({ type, Component }) => ({
      Component,
      props: {
        label: isCollapsed ? t(`TUIChat.${type}`) : '',
        iconSize: isCollapsed ? ICON_SIZE.COLLAPSED : ICON_SIZE.EXPANDED,
        disabled,
      },
    }));
  };
  const AttachmentButton = (
    <div
      title={t('MessageInput.file')}
      onClick={(e: React.MouseEvent<HTMLDivElement>) => {
        if (disabled) {
          return;
        }
        setAnchor(e.currentTarget);
      }}
    >
      <IconAddCircle
        className={cs(classes['attachment-picker__single-button'], { [classes['attachment-picker__single-button--disabled']]: disabled })}
        size="28px"
      />
    </div>
  );

  const PickerContent = (
    <View
      className={
        isCollapsed
          ? classes['attachment-picker__popup']
          : classes['attachment-picker--expanded']
      }
      dir={direction}
    >
      {getPickerItems().map(({ Component, props }, index) => (
        <Component key={index} {...props} onClose={() => setAnchor(null)} />
      ))}
    </View>
  );

  return (
    <View className={cs(classes['attachment-picker'], className)} style={style}>
      {isCollapsed
        ? (
          <>
            {AttachmentButton}
            <Popup
              open={Boolean(anchor)}
              onOpenChange={(open) => {
                if (!open) {
                  setAnchor(null);
                }
              }}
              anchor={anchor}
              placement={direction === 'ltr' ? 'top-start' : 'top-end'}
              style={{ zIndex: 1 }}
              offset={10}
            >
              {PickerContent}
            </Popup>
          </>
        )
        : PickerContent}
    </View>
  );
}

export { AttachmentPicker };