import {
  ProDescriptions,
  type ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import { type DescriptionsProps, Modal } from 'antd';
import React, {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useState,
} from 'react';
export interface DescriptionsFormRef {
  open: (data?: Record<string, any>) => void;
  close: () => void;
}

interface Props {
  columns: ProDescriptionsItemProps<Record<string, any>, 'text'>[];
  title: string;
}

const ModalDescriptions = forwardRef((props: Props, ref) => {
  const { columns, title } = props;
  const [visible, setVisible] = useState<boolean>(false);
  const [data, setData] = useState<DescriptionsProps['items']>([]);
  useImperativeHandle(ref, () => ({
    open: (data: DescriptionsProps['items']) => {
      console.log(data);
      if (data) {
        setData(data);
      }
      setVisible(true);
    },
    close: () => setVisible(false),
  }));

  const changeVisible = useCallback(
    (flag: boolean) => {
      setVisible(flag);
    },
    [visible],
  );

  return (
    <Modal
      open={visible}
      width={800}
      onCancel={() => changeVisible(false)}
      footer={null}
    >
      <ProDescriptions
        labelStyle={{ width: '200px' }}
        columns={columns}
        dataSource={data}
        bordered
        column={1}
        size="small"
        title={title}
        // tooltip="操作日志详情"
      ></ProDescriptions>
      {/* <Descriptions
        title="操作日志"
        column={1}
        bordered
        size="small"
        items={data}
      /> */}
    </Modal>
  );
});

export default React.memo(ModalDescriptions);