/* eslint-disable */
import React, { useRef, useState, useEffect } from "react";
import styles from "./index.less";
import {
  createPathElement,
  createTopTongue,
  createTopTongueType1,
  createTrapezoid,
  createDynamicTop,
  createNoneProject,
} from "../BoxDesign/createAirplaneBox";
const SvgBox = props => {
  console.log("🚀 ~ propsprops:", props);
  const svgContainerRef = useRef(null);
  const svgRef = useRef(null);
  const [boxKey, setBoxKey] = useState(new Date().getTime());
  const { boxList, boxSize } = props;

  // 盒身
  useEffect(
    () => {
      initSVG();
    },
    [boxList, boxSize]
  );
  // 初始化svg
  const initSVG = () => {
    const svg = svgRef.current;
    svg.innerHTML = "";
    // const {svgType} = props
    const svgType = 0;
    // 获取长宽高
    const width = Number(boxSize?.length);
    const height = Number(boxSize?.width);
    const deep = Number(boxSize?.height);
    console.log(boxList, "boxLists");

    let pathList = [];
    // 判断盒型类型 根据不同盒型展示不同的盒身 0 四面盒身
    if (svgType === 0) {
      const rectangles = [
        { x: 0, y: 0, width, height },
        { x: 0 + width, y: 0, width: deep, height },
        { x: 0 + deep + width, y: 0, width, height },
        { x: 0 + width * 2 + deep, y: 0, width: deep, height },
      ];
      rectangles.forEach(rect => {
        svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
      });
      // 处理部件
      // 上方盒舌
      pathList.push(createUpperBoxTongueLeft(boxList[0]?.type, width, height, deep, Number(boxList[0]?.value), width, 0, 2, -2, 1, 5));
      // 下边盒舌
      pathList.push(createUpperBoxTongueRight(boxList[0]?.type, width, height, deep, Number(boxList[0]?.value), width * 2 + deep * 2, 0, -2, 5));
      // 左边贴边
      pathList.push(createTrapezoidLeft(boxList[4]?.type, height, 0, 0, Number(boxList[4]?.value)));
      // 右边贴边
      pathList.push(createTrapezoidRight(boxList[7]?.type, height, width * 2 + deep * 2, 0, -Number(boxList[7]?.value)));
      // 下边舌
      pathList.push(createUpperBoxTongueLeft(boxList[2]?.type, width, height, deep, -Number(boxList[2]?.value), width, height, 2, 2, 0, -5));
      pathList.push(
        createUpperBoxTongueRight(boxList[2]?.type, width, height, deep, -Number(boxList[2]?.value), width * 2 + deep * 2, height, -2, 2, 1, -5)
      );
      // 左上部件
      pathList.push(createDynamicTopLeft(boxList[3]?.type, width, height, deep, 0, 0, Number(boxList[3]?.value)));
      // 右上部件
      pathList.push(createDynamicTopRight(boxList[6]?.type, width, height, deep, width + deep, 0, Number(boxList[6]?.value)));
      // 左下部件
      pathList.push(createDynamicTopLeft(boxList[5]?.type, width, height, -deep, 0, height, -Number(boxList[5]?.value)));
      // 右下部件
      pathList.push(createDynamicTopRight(boxList[8]?.type, width, height, -deep, width + deep, height, -Number(boxList[8]?.value)));
      // 盒底组件
      pathList.push(createBoxBottomComponent(0));
      pathList.forEach(x => {
        svg.appendChild(x);
      });
    }
    // 计算展长展宽 还需要加上贴边
    const viewBoxWidth = (width * 2 + deep * 2) * 1.5;
    // 要判断是否有上下部件
    let max = 0;
    if (boxList[0]?.value && boxList[0]?.type !== null) {
      max = Number(boxList[0].value);
    }
    const targetIndicesSh = [0, 2];
    const targetIndices = [3, 5, 6, 8];
    if (boxList && boxList.length) {
      const filterShData = targetIndicesSh.map(index => boxList[index]).filter(item => item.type !== null && item.value !== "");
      const filteredData = targetIndices.map(index => boxList[index]).filter(item => item.type !== null && item.value !== "");
      if (filterShData && filterShData.length) {
        max = Math.max(...filterShData.map(item => Number(item.value))) ;
      }
      if (filteredData && filteredData.length) {
        max = Math.max(...filteredData.map(item => Number(item.value))) * 3;
      }
    }
    const viewBoxHeight = (height + max) * 2;
    // 更新 SVG 的 viewBox 和尺寸
    const svgContainer = svgContainerRef.current;
    svg.setAttribute("viewBox", `${-viewBoxWidth * 0.1} ${-viewBoxHeight * 0.3} ${viewBoxWidth} ${viewBoxHeight}`);
    svg.setAttribute("width", `${viewBoxWidth}px`);
    svg.setAttribute("height", `${viewBoxHeight}px`);
    // svgContainer.style.width = `${viewBoxWidth}px`;
    // svgContainer.style.height = `${viewBoxHeight}px`;
  };
  // 上方盒舌左边
  const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2);
        break;
      case 1:
        data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上方盒舌
  const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      case 1:
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上方盒舌
  const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true);
        break;
      case 1:
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false);
        break;
      case 1:
        data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };

  // 左边贴位
  const createTrapezoidLeft = (trapezoidLeftType, height, offsetX, offsetY, dg) => {
    if (!dg) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case 0:
        data = createTrapezoid(height, offsetX, offsetY, dg);
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右边贴位
  const createTrapezoidRight = (trapezoidLeftType, height, offsetX, offsetY, dg) => {
    if (!dg) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case 0:
        data = createTrapezoid(height, offsetX, offsetY, dg);
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 左上部件
  const createDynamicTopLeft = (trapezoidLeftType, width, height, deep, offsetX, offsetY, size) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case 0:
        data = createDynamicTop(width, height, deep, offsetX, offsetY, size);
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上部件
  const createDynamicTopRight = (trapezoidLeftType, width, height, deep, offsetX, offsetY, size) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case 0:
        data = createDynamicTop(width, height, deep, offsetX, offsetY, size);
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 盒底组件 特殊的盒底组件
  const createBoxBottomComponent = trapezoidLeftType => {
    let data = {};
    switch (trapezoidLeftType) {
      case 0:
        data = createNoneProject();
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  return (
    <div
      id="svgContainer"
      key={boxKey}
      ref={svgContainerRef}
      style={{
        width: "100%",
        height: "100%",
      }}
    >
      <svg
        className={styles.svgContainer}
        id="dynamicSvg"
        xmlns="http://www.w3.org/2000/svg"
        ref={svgRef}
        viewBox="0 -150 400 300"
        preserveAspectRatio="xMidYMid meet"
        width="100%"
        height="100%"
      />
    </div>
  );
};

export default SvgBox;