/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-01 13:56:33
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-28 14:25:08
 * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelCategoryList\components\ColumnDrawer.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { CloseOutlined } from '@ant-design/icons';
import { ProColumns, ProDescriptions, ProDescriptionsItemProps } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';

export type ColumnDrawProps = {
  handleDrawer: (id?: any) => void;
  isShowDetail: boolean;
  columns: ProColumns<API.ModelCategory>[];
  currentRow: Record<string, any>;
  clipPathData: Record<string, any>;
  canvasObject: any;
};

const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
  const [positionStyle, setPositionStyle] = useState<React.CSSProperties>({});
  // 生成模型详情卡片位置
  function initPointPosition() {
    const zoomIndex = 1 * props.canvasObject?.getZoom();

    type Point = { x: number; y: number };
    type Position = 'left' | 'right' | 'top' | 'bottom';
    let currPositionStyle: React.CSSProperties = {};
    const modelInfoPosition: Position[] = ['right'];
    const maxX = props.clipPathData?.width * zoomIndex; // 画布宽度
    const maxY = props.clipPathData?.height * zoomIndex; // 画布高度
    const x = props.currentRow.baseInfo?.left; // 模型x轴位置
    const y = props.currentRow.baseInfo?.top; // 模型y轴位置
    const modelWidth: number = 120; // 模型自身宽度
    const modelHeight: number = 54; // 模型自身高度
    const modelInfoWidth: number = 400; // 模型信息卡片宽度
    const modelInfoHeight: number = 240; // 模型信息卡片高度
    // if (x < 0 || x > maxX || y < 0 || y > maxY) {
    //   // 模型超过范围
    // }
    if (x > maxX / 2) {
      modelInfoPosition.push('left');
      // if (x < maxX / 2) {
      //     modelInfoPosition.push('left');
      //   } else {
      //     modelInfoPosition.push('right');
      //   }
    } else {
      modelInfoPosition.push('right');
      //   if (y < maxY / 2) {
      //     modelInfoPosition.push('top');
      //   } else {
      //     modelInfoPosition.push('bottom');
      //   }
    }
    console.log(props.currentRow, 'currentRow');
    if (modelInfoPosition.includes('left')) {
      let topValue = y - modelInfoHeight / 2 + modelHeight / 2;
      if (topValue > maxY - modelInfoHeight) {
        topValue = maxY - modelInfoHeight;
      }
      if (topValue < 0) {
        topValue = 0;
      }
      currPositionStyle = {
        top: topValue,
        left: x - modelInfoWidth - 10,
      };
    } else {
      let topValue = y - modelInfoHeight / 2 + modelHeight / 2;
      if (topValue > maxY - modelInfoHeight) {
        topValue = maxY - modelInfoHeight;
      }
      if (topValue < 0) {
        topValue = 0;
      }
      currPositionStyle = {
        top: topValue,
        left: x + modelWidth + 10,
      };
    }
    setPositionStyle(currPositionStyle);
  }

  useEffect(() => {
    if (props.currentRow) {
      initPointPosition();
    }
  }, [props.currentRow, props.clipPathData, props.canvasObject]);
  return props.isShowDetail ? (
    <div
      style={{
        position: 'absolute',
        background: '#fff',
        borderRadius: 4,
        width: 400,
        boxShadow: '0px 8px 12px rgba(0, 0, 0, 0.25)',
        border: '1px solid #eee',
        ...positionStyle,
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          padding: '16px 24px',
          borderBottom: '1px solid #eee',
          color: '#1E1E1E',
          fontSize: 20,
          fontWeight: 700,
          marginBottom: 16,
        }}
      >
        <span>设备信息</span>
        <CloseOutlined onClick={() => props.handleDrawer()} />
      </div>
      <ProDescriptions
        style={{
          padding: '0 24px',
        }}
        column={2}
        dataSource={props.currentRow || {}}
        columns={props.columns as ProDescriptionsItemProps<API.ModelCategory>[]}
      ></ProDescriptions>
    </div>
  ) : (
    <></>
  );

  // <Modal
  //   title="设备信息"
  //   mask={false}

  //   open={props.isShowDetail}
  //   width={500}
  //   footer={null}
  //   onCancel={() => props.handleDrawer()}
  // >

  // </Modal>
  // <Drawer
  //   width={500}
  //   open={props.isShowDetail}
  //   onClose={() => {
  //     props.handleDrawer();
  //   }}
  //   closable={true}
  // >
  //   {props.currentRow?.id && (
  //     <ProDescriptions<API.ModelCategory>
  //       style={{
  //         // paddingLeft: 4,
  //         // paddingRight: 4
  //       }}
  //       column={2}
  //       title={props.currentRow?.id}
  //       request={async () => ({
  //         data: props.currentRow || {},
  //       })}
  //       params={{
  //         id: props.currentRow?.id,
  //       }}
  //       columns={props.columns as ProDescriptionsItemProps<API.ModelCategory>[]}
  //     />
  //   )}
  // </Drawer>
};
export { ColumnDrawer };
