// withHooks
// noPage
import esp from "esoftplay/esp";
import React from 'react';


export interface EventSeat_map_matrixArgs {

}
export interface EventSeat_map_matrixProps {

}
export default function m(props: any): any {
  const { Group, RoundedRect, Text, useFont, Canvas }  = require('@shopify/react-native-skia')
  const { mapWidth, mapHeight, data, seatNames, numCols, boxSize, margin, squareSize, rB, title } = props
  const halfMargin = margin * 0.5
  const fontSize = squareSize * 0.25;
  const font = useFont(esp.assets("fonts/Arial.ttf"), fontSize);
  let col = 0
  let row = 0

  return (
    <Canvas style={{ width: mapWidth, height: mapHeight }} >
      {
        data.map((status: number, i: number) => {
          const c = seatNames[i]
          const color = status == -1 ? "#8EF67B" : "#f1f1f1"
          if (i % (numCols.current) == 0) {
            col = i / (numCols.current)
          }
          row = i % numCols.current
          const xSize = row * (boxSize) + margin
          const ySize = col * (boxSize) + margin

          if (status == 0 || status == -1) {
            return (
              <Group key={row + ":" + col}>
                <RoundedRect
                  x={xSize /* + squareSize * 0.05 */}
                  r={rB}
                  y={ySize}
                  width={squareSize /* - (squareSize * 0.1) */}
                  height={squareSize}
                  color={color} />
                <Text
                  x={(xSize) + squareSize * 0.3}
                  y={(ySize) + squareSize * 0.60}
                  color="#020202"
                  text={c}
                  font={font} />
              </Group>
            )
          } else if (status == 8) {
            return (
              <RoundedRect
                key={row + ":" + col}
                x={xSize - halfMargin}
                r={0}
                y={ySize - halfMargin}
                width={boxSize}
                height={boxSize}
                color={getColorByStatus(status)} />
            )
          } else {
            return (
              <RoundedRect
                key={row + ":" + col}
                x={xSize}
                r={rB}
                y={ySize}
                width={squareSize}
                height={squareSize}
                color={getColorByStatus(status)} />)
          }
        })}
    </Canvas>
  )
}


function getColorByStatus(statuses: number) {
  const colors: any = {
    8: 'purple',
    0: "#fff",
    1: "#9FA1A4",
    2: "#6B71E6",
    3: "#2EBBE8",
    4: "#FFA601",
    5: "#fff",
    6: "#FF4866",
    7: "#6C432C"
  }
  return colors[statuses]
}