import React from 'react'
import { Line, Rect } from 'react-konva';
import { Horizontal, ViewCenter } from './consts';
import { XY } from './coordinates'

const INTERVALS = [0, 1, 2];

const ZmDec: React.FC<{
  tl: XY;
  rb: XY;
}> = ({ tl, rb }) => {

  const ux = (rb.x - tl.x) / 12;
  const uy = (rb.y - tl.y) / 12;

  const ox = tl.x + 3 * ux;
  const oy = tl.y + 3 * uy;

  return (
    <>
      {
        INTERVALS.map(y => (
          <React.Fragment key={y}>
            {
              INTERVALS.map(x => {
                const cx = ox + x * 3 * ux;
                const cy = oy + y * 3 * uy;
                const l = cx - ux;
                const r = cx + ux;
                const t = cy - uy;
                const b = cy + uy;
                return (
                  <React.Fragment key={x}>
                    <Rect fill="323737" x={l} y={t} width={2 * ux} height={2 * uy} />
                    {
                      cx < ViewCenter.x ? (
                        <Line points={[l, t, l, b]} stroke="#afb5b5" strokeWidth={1} />
                      ) : (
                        <Line points={[r, t, r, b]} stroke="#afb5b5" strokeWidth={1} />
                      )
                    }
                    {
                      cy < Horizontal ? (
                        <Line points={[l, t, r, t]} stroke="#afb5b5" strokeWidth={1} />
                      ) : (
                        <Line points={[l, b, r, b]} stroke="#afb5b5" strokeWidth={1} />
                      )
                    }
                  </React.Fragment>
                )
              })
            }
          </React.Fragment>
        ))
      }
    </>
  )
}

export default ZmDec