import Button from 'antd/lib/button';
import Input from 'antd/lib/input';
import message from 'antd/lib/message';
import Popover from 'antd/lib/popover';
import { TooltipPlacement } from 'antd/lib/tooltip';
import React, { useEffect, useMemo, useState } from 'react';
import { copy } from '../../renderers/Lion/utils/utils';
import { ClassNamesFn } from '../../theme';
import { Icon } from '../icons';
interface IProps {
  visible?: boolean;
  onVisibleChange?: (visible: boolean) => void;
  translate: (str: any, data?: object | undefined) => string;
  values?: string;
  onValuesChange?: (values: string) => void;
  onReset: () => void;
  handleText: (val: string) => void;
  classPrefix: string;
  icon?: string;
  classnames: ClassNamesFn;
  placement?: TooltipPlacement;
}
const TextareaPop = (props: IProps) => {
  const { visible, onVisibleChange, translate, values, onValuesChange, onReset, classPrefix: ns, icon,
    handleText, classnames: cx, placement } = props;
  const [tempValue, setTempValue] = useState(values);
  useEffect(() => {
    setTempValue(values)
  }, [values])
  const [tempVisible, setTempVisible] = useState(visible);
  const valuesLength = useMemo(() => {
    return tempValue?.split('\n')?.filter(item => item !== '').reduce((cxd: any, item) => {
      if (item.includes(",")) {
        cxd = [...item.split(','), ...cxd]
      } else {
        cxd = [item, ...cxd]
      }
      return cxd
    }, [])
  }, [tempValue])
  const handleConfirm = () => {
    let temp = tempValue?.split('\n')?.filter(item => item !== '')
    // 最大支持9999行
    if (temp && temp.length >= 9999) {
      temp = temp.slice(0, 9999)
    }
    let val = temp?.join(',')
    if (val?.[val?.length - 1] === ',') {
      val = val.slice(0, val.length - 1)
    }
    val = Array.from(new Set(val?.split(',')?.map?.(item => item.trim()))).join(',')
    handleText(val)
    setTempVisible(false)
  }
  const handleReset = () => {
    setTempValue(undefined);
    onReset()
  }
  const popoverIconRef = React.createRef<HTMLDivElement>() // Jay
  return <Popover arrowPointAtCenter placement={placement || "bottom"} visible={tempVisible}
    onVisibleChange={(visible) => {
      onVisibleChange?.(visible)
      setTempVisible(visible)
    }}
    getPopupContainer={() => document.getElementById('amis-modal-container') || popoverIconRef.current!} trigger="click" content={
      <div onContextMenu={e => e.stopPropagation()}>
        <Input.TextArea style={{ width: 300 }} rows={6}
          placeholder={translate('multipleValuesMax')}
          value={tempValue}
          onChange={(e) => {
            onValuesChange?.(e.target.value)
            setTempValue(e.target.value)
          }}
          onKeyDown={e => e.stopPropagation()}
        />
        <div className="button-group" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginTop: '10px',
        }}>
          <div>
            <Button size="small" style={{ marginRight: 10, fontSize: 12 }} onClick={handleReset}>
              {translate('reset')}
            </Button>
            <Button size="small" style={{ marginRight: 10, fontSize: 12 }} onClick={async () => {
              if (tempValue) {
                const val = tempValue?.replace(/\s+/g, ',')
                await copy(val);
                message.success(translate('System.copy'))
              }
            }}>
              {translate('Alert.copy')}
            </Button>
          </div>
          {translate("rowInTotal", { total: valuesLength?.length ?? 0 })}
          <div>
            <Button size="small" style={{ marginRight: 10 }}
              onClick={() => {
                onVisibleChange?.(false)
                setTempVisible(false)
              }}
            >
              {translate('Dialog.close')}
            </Button>
            <Button size="small" type="primary" onClick={handleConfirm} >
              {translate('confirm')}
            </Button>
          </div>
        </div>
      </div >
    }>
    <div ref={popoverIconRef}
      className={`${ns}TextControl-addOn ${icon ? ns + "TextControl-addOn-icon" : ""}`}
      onClick={() => {
        onVisibleChange?.(!tempVisible)
        setTempVisible(!tempVisible)
      }}>
      {
        icon !== undefined ?
          <span className={cx('TransferPicker-icon')}>
            <Icon icon={icon} className="icon" />
          </span>
          :
          <i className="icon fa fa-ellipsis-v" />
      }
    </div>
  </Popover >
}

export default TextareaPop;