import { IpcRenderer } from "electron/renderer";
import { useState } from "react";
import { PatternOutput } from "../patterns/proto";
import './patterns.css';

import _snoop from '../res/snoop.png';
import _strobo from '../res/strobo.jpg';


const ipcRenderer = (window as any).electron.ipcRenderer as IpcRenderer;

const PatternPreview: React.FC<{ patternId: string, output: PatternOutput, selectedPattern: string }> = ({ patternId, output, selectedPattern }) => {
  const [previousPattern, setPreviousPattern] = useState(patternId);
  const selected = selectedPattern === patternId;

  const selectedClass = selected ? " selected" : "";
  const styleClass = "pattern-button" + selectedClass;

  const styleObj: React.CSSProperties = {};

  if (patternId === "snoop") {
    styleObj.background = "none";
  }

  return <div style={{ margin: 5 }}>
    <svg className={styleClass}
      style={styleObj}
      onMouseUp={() => {
        console.log("umu on", patternId);
        if (patternId === "stroboInsGesictLOL") {
          // restore after strobe
          ipcRenderer.send("pattern-select", previousPattern);
        }
      }}
      onMouseDown={() => {
        console.log("omd on", patternId);
        console.log("storing", selectedPattern);
        // store before strobe
        setPreviousPattern(selectedPattern);
        ipcRenderer.send("pattern-select", patternId)
      }}
      //onClick={() =>
      //  ipcRenderer.send("pattern-select", patternId)
      //}
      width={260 + 2 * 70} height="150">
      {output?.map((headState, index) => {
        const [r, g, b, w] = headState.rgbw;
        const brightness = "value" in headState.brightness ? headState.brightness.value : 0;
        return <ColorCone key={index} tilt={headState.tilt} pan={headState.pan} white={w} color={`rgba(${r},${g},${b},${(0.3 + 0.7 * brightness)})`} translate={[70 + index * 65, 0]} />
      }
      )}
    </svg>
  </div>
}

const ColorCone: React.FC<{ pan: number, tilt: number, color: string, translate: [number, number], white: number }> = ({ color, translate: [x, y], white, pan, tilt }) => {
  return <g transform={`translate(${x} ${y})`}>
    {white === 0 ? null
      : <Cone pan={pan} tilt={tilt} color={`rgba(1, 1, 1, ${white}`} translate={[x, y]} />
    }
    <Cone pan={pan} tilt={tilt} color={color} translate={[x, y]} />
  </g>
};


const Cone: React.FC<{ color: string, translate: [number, number], pan: number, tilt: number }> = ({ color, tilt, pan }) => {
  // tilt is correct with -45 degree offset, but if lights are pointing down, they will be displayed to point down right
  const degreesTilt = tilt / (2 * Math.PI) * 360 - 45;
  // TODO: adjust if necessary
  const degreesPan = pan / (2 * Math.PI) * 360 - 45;

  // console.log(degreesTilt);
  return <g className="cone" style={{ transform: `rotate(${degreesTilt}deg) rotateX(${degreesPan}deg)` }} >
    <path stroke="black" fill="gray" d="M 15 0 L 45 0 L 60 30 L 0 30 L 15 0" />
    <path fill={color} d="M 15 30 L 0 150 L 60 150 L 45 30 " />
  </g>;
};

export default PatternPreview;
