import { createContext, useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Popover, Flex, Button, List, Popconfirm } from 'antd';

const CreatePayment = observer((props) => {
  const [open, setOpen] = useState(false);
  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };
  const onSend = () => {
    setOpen(false);
    // todo: send
  };
  return (
    <>
      <Popover
        // content={<a onClick={hide}>Close</a>}
        content={
          <List
            className='w-96 h-4/6 overflow-y-auto text-slate-900'
            itemLayout='horizontal'
            dataSource={[
              { key: 1, title: 'XXX' },
              { key: 11, title: 'ZZZZ' },
            ]}
            renderItem={(item, index) => (
              <List.Item className=''>
                <List.Item.Meta
                  className=' text-neutral-800'
                  title={item.title}
                  description={
                    <Flex justify='space-between'>
                      <Button onClick={onSend} size={'small'} type='link' key={'send'}>
                        详细报价
                      </Button>
                      <Flex gap={8}>
                        <Popconfirm title='删除报价信' description='确认要删除报价信吗?' onConfirm={() => {}} onCancel={onSend} okText='Yes' cancelText='No'>
                          <Button size={'small'} type='link' danger key={'send'}>
                            删除
                          </Button>
                        </Popconfirm>
                        <Button onClick={onSend} size={'small'} type='link' key={'send'}>
                          复制
                        </Button>
                      </Flex>
                    </Flex>
                  }
                />
              </List.Item>
            )}
          />
        }
        title='📜报价信历史'
        trigger='click'
        placement={'left'}
        open={open}
        onOpenChange={handleOpenChange}>
        <Button size={'small'}>报价历史</Button>
      </Popover>
    </>
  );
});
export default CreatePayment;
