import React, { useMemo } from 'react';
import { Layer, Rect } from 'react-konva';
import ColorPolygon from './ColorPolygon';
import { Window1, WindowSep } from './Window';
import { TopRoomHeight } from './consts';
import { ControlPts, mirror } from './coordinates';


const Topper1: React.FC<{
  pts: ControlPts;
  type: number;
}> = ({ pts, type }) => {

  const windows = useMemo<{
    w: number[][];
    h: number[][];
  }>(() => {
    const x1 = pts.TopRectLB.x;
    const y0 = pts.TopRectLB.y - TopRoomHeight
    const y1 = pts.TopRectLB.y - TopRoomHeight * 0.75;
    const x2 = pts.TopRectRB.x;
    const y2 = pts.TopRectLB.y - TopRoomHeight * 0.25;
    if (type === 1) {
      const u = (x2 - x1) / 10;
      return {
        w: [
          [x1 + u, y1, x1 + 3 * u, y2],
          [x1 + 4 * u, y1, x1 + 6 * u, y2],
          [x1 + 7 * u, y1, x1 + 9 * u, y2],
        ],
        h: []
      }
    } else if (type === 2) {
      const u = (x2 - x1 - 8) / 14;
      return {
        w: [
          [x1 + u, y1, x1 + 3 * u, y2],
          [x1 + 4 * u, y1, x1 + 6 * u, y2],
          [x1 + 8 * u + 8, y1, x1 + 10 * u + 8, y2],
          [x1 + 11 * u + 8, y1, x1 + 13 * u + 8, y2],
        ],
        h: [
          [x1 + 7 * u, y0, x1 + 7 * u + 8, pts.TopRectLB.y],
        ],
      }
    } else if (type === 3) {
      const xc = (x2 - x1) * 0.5;
      const u = (xc - 8) / 8;
      return {
        w: [
          [x1 + u, y1, x1 + 3 * u, y2],
          [x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
          [x1 + u + xc, y1, x1 + 3 * u + xc, y2],
          [x1 + 5 * u + 8 + xc, y1, x1 + 7 * u + 8 + xc, y2],
        ],
        h: [
          [x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
          [x1 + 4 * u + xc, y0, x1 + 4 * u + 8 + xc, pts.TopRectLB.y],
        ]
      }
    } else if (type > 3) {
      const xc1 = (x2 - x1) / 3;
      const xc2 = xc1 * 2;
      const u = (xc1 - 8) / 8;
      return {
        w: [
          [x1 + u, y1, x1 + 3 * u, y2],
          [x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
          [x1 + u + xc1, y1, x1 + 3 * u + xc1, y2],
          [x1 + 5 * u + 8 + xc1, y1, x1 + 7 * u + 8 + xc1, y2],
          [x1 + u + xc2, y1, x1 + 3 * u + xc2, y2],
          [x1 + 5 * u + 8 + xc2, y1, x1 + 7 * u + 8 + xc2, y2],
        ],
        h: [
          [x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
          [x1 + 4 * u + xc1, y0, x1 + 4 * u + 8 + xc1, pts.TopRectLB.y],
          [x1 + 4 * u + xc2, y0, x1 + 4 * u + 8 + xc2, pts.TopRectLB.y],
        ]
      }
    }
    return {
      w: [], h: []
    }
  }, [])

  return (
    <Layer>
      <Rect fill='#738b8b' x={pts.TopRectLB.x} y={pts.TopRectLB.y - TopRoomHeight} width={pts.TopRectRB.x - pts.TopRectLB.x} height={TopRoomHeight} />
      <ColorPolygon fill='#4a5c5e' pts={[pts.TopRectLB, pts.RoomRBFar, mirror(pts.RoomRBFar), pts.TopRectRB]} />
      {
        pts.SepsLTLBRBRT.map((s, index) => (
          <ColorPolygon key={'a' + index} fill='#334648' pts={s} />
        ))
      }
      {
        windows.w.map((o, index) => <Window1 rect={o} key={'w' + index} />)
      }
      {
        windows.h.map((o, index) => <WindowSep rect={o} key={'h' + index} />)
      }
    </Layer>
  )
}

export default React.memo(Topper1);