import React, { useState } from 'react';
import { Image, Popover, Button, message } from 'antd';
import { CloseCircleOutlined, EllipsisOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { postRecognition } from '@/services/alarm/Involved';

interface ImageWithPopoverProps {
  src: string;
  reload: any;
  person_id: any;
}

const ImageWithPopover: React.FC<ImageWithPopoverProps> = ({ src, person_id,reload }) => {
  const intl = useIntl();
  const [visible, setVisible] = useState(false);
  const [open, setOpen] = useState(false);
  
  const content = (
    <div style={{ display: 'flex', justifyContent: 'center',alignItems: 'center', height: '100%'}}>
      {/* <div>选项1</div>
      <div>选项2</div> */}
      <Button 
        type="text" 
        style={{ height:22, padding: 0,fontSize: 12,color: '#FFF' }} 
        icon={<CloseCircleOutlined style={{ color: '#E80D0D',fontSize: 12}} />}
        onClick={(event)=>{
            event.stopPropagation();
            postRecognition({
              person_id: person_id,
              classify: '0'
            })
              .then(() => {
                message.success('此人已被移除重点关注');
                reload();
              })
              .catch(() => {
                message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
              });
            setOpen(false)
        }}
        >移除重点关注</Button>
    </div>
  );
  const handleVisibleChange = (value: boolean) => {
    setVisible(value);
  };

  const handleOpenChange = (value: boolean) => {
    setOpen(value);
  };
  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation(); // 阻止事件冒泡到父组件并阻止默认事件触发
  };

  return (
    <div style={{ position: 'relative', boxSizing: 'border-box', width: 96, height: 96 }}>
      <Image
        style={{ borderRadius: 4 }}
        width={96}
        height={96}
        preview={false}
        src={src}
      />
      <Popover
        placement="right"
        content={content}
        trigger="click"
        style={{ width: 104, height: 32 }}
        color="rgba(0, 0, 0, 0.6)"
        overlayInnerStyle={{ width: 104, height: 32, padding: 4, borderRadius: 2 }}
        open={open}
        onOpenChange={handleOpenChange}
      >
        <Button
          style={{ position: 'absolute', bottom: 0, right: -4 }}
          type="text"
          icon={<EllipsisOutlined style={{ color: '#fff', fontSize: 24, transform: 'rotate(90deg)' }} />}
          onClick={handleButtonClick}
        />
      </Popover>
      {/* {involved.state && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: 64,
            height: 24,
            background: '#FAAD14',
            borderRadius: '0px 4px 0px 4px',
            color: '#FFF',
            fontSize: 12,
            textAlign: 'center',
            lineHeight: '24px'
          }}
        >
          重点关注
        </div>
      )} */}
    </div>
  );
};

export default ImageWithPopover;