import React from 'react'
import { Line, Rect } from 'react-konva';
import ColorPolygon from './ColorPolygon';

const S1 = 4;

export const Window1: React.FC<{
  rect: number[];
}> = ({ rect }) => {
  const [x1, y1, x2, y2] = rect;

  const w1 = (x2 - x1 - S1) / 2;
  const w2 = (x2 - x1 - S1 * 2) / 3;

  return (
    <>
      <Rect fill='#b1c3cf' x={x1} y={y1} width={w1} height={16} />
      <Rect fill='#b1c3cf' x={x1 + w1 + S1} y={y1} width={w1} height={16} />

      <Rect fill='#b1c3cf' x={x1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
      <Rect fill='#b1c3cf' x={x1 + w2 + S1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
      <Rect fill='#b1c3cf' x={x1 + (w2 + S1) * 2} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
    </>
  )
}

export const WindowSep: React.FC<{
  rect: number[];
}> = ({ rect }) => {
  const [x1, y1, x2, y2] = rect;

  return (
    <Rect fill='#b1c3cf' x={x1} y={y1 - 8} width={x2 - x1} height={y2 - y1 + 8} />
  )
}

export const RoomWindows: React.FC<{
  rect: number[];
}> = ({ rect }) => {
  const [x1, y1, x2, y2] = rect;

  const u = (x2 - x1) / 10;
  const v = (y2 - y1) / 6;

  const c1 = x1 - 10 + 1;
  const c2 = x1 - 10 + 7 * u;
  const dc = (c2 - c1) / 10;

  return (
    <>
      <Rect fill='#c1d3d5' x={x1 + u} y={y1 + v} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u, y1 + v, x1 + 2 * u, y1 + v]} />
      <Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v, x1 + 3 * u + 2, y1 + v]} />


      <Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 5, y1 + v, x1 + 6 * u, y1 + v]} />
      <Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v, x1 + 7 * u + 2, y1 + v]} />



      <Rect fill='#c1d3d5' x={x1 + u} y={y1 + v * 4} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u, y1 + v * 4, x1 + 2 * u, y1 + v * 4]} />
      <Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v * 4} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v * 4, x1 + 3 * u + 2, y1 + v * 4]} />


      <Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v * 4} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 5, y1 + v * 4, x1 + 6 * u, y1 + v * 4]} />
      <Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v * 4} width={u} height={v} />
      <Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v * 4, x1 + 7 * u + 2, y1 + v * 4]} />

      <Rect fill='#8fa7a7' x={x1 - 10} y={y1 + 3 * v} width={7 * u} height={v * 0.6} />
      <ColorPolygon
        fill='#4a5c5e'
        pts={[
          [x1 - 10, y1 + 3.6 * v],
          [x1 - 10 + 4, y1 + 3.6 * v + 2],
          [x1 - 10 + 7 * u + 3, y1 + 3.6 * v + 2],
          [x1 - 10 + 7 * u + 3, y1 + 3 * v + 2],
          [x1 - 10 + 7 * u, y1 + 3 * v],
          [x1 - 10 + 7 * u, y1 + 3.6 * v + 2],
          [x1 - 10 + 7 * u, y1 + 3.6 * v],
        ]}
      />
      <Line stroke='#8fa7a7' lineJoin='round' points={[
        x1, y1 + 2.5 * v + 2,
        x1 - 10 + 4, y1 + 2.5 * v + 2,
        x1 - 10, y1 + 2.5 * v, x1 - 10 + 7 * u, y1 + 2.5 * v,
        x1 - 10 + 7 * u + 3, y1 + 2.5 * v + 2,
      ]} />
      <Line stroke='#8fa7a7' points={[x1 - 10 + 4, y1 + 2.5 * v + 2, x1 - 10 + 4, y1 + 3 * v]} />
      {
        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => (
          <Line key={i} stroke='#8fa7a7' points={[c1 + dc * i, y1 + 2.5 * v, c1 + dc * i, y1 + 3 * v]} />
        ))
      }

    </>

  )
}