import {FC, useEffect, useState} from "react";
import ReactSlider from "react-slider";

import {LocalizeText, WiredFurniType} from "../../../../api";
import {Column, Flex, Text} from "../../../../common";
import {useWired} from "../../../../hooks";
import {WiredActionBaseView} from "./WiredActionBaseView";

const directionOptions: {value: number; icon: string}[] = [
  {
    value: 0,
    icon: "ne",
  },
  {
    value: 2,
    icon: "se",
  },
  {
    value: 4,
    icon: "sw",
  },
  {
    value: 6,
    icon: "nw",
  },
];

export const WiredActionMoveFurniToView: FC<{}> = props => {
  const [spacing, setSpacing] = useState(-1);
  const [movement, setMovement] = useState(-1);
  const {trigger = null, setIntParams = null} = useWired();

  const save = () => setIntParams([movement, spacing]);

  useEffect(() => {
    if (trigger.intData.length >= 2) {
      setSpacing(trigger.intData[1]);
      setMovement(trigger.intData[0]);
    } else {
      setSpacing(-1);
      setMovement(-1);
    }
  }, [trigger]);

  return (
    <WiredActionBaseView requiresFurni={WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE} hasSpecialInput={true} save={save}>
      <Column gap={1}>
        <Text bold>{LocalizeText("wiredfurni.params.emptytiles", ["tiles"], [spacing.toString()])}</Text>
        <ReactSlider className={"nitro-slider"} min={1} max={5} value={spacing} onChange={event => setSpacing(event)} />
      </Column>
      <Column gap={1}>
        <Text bold>{LocalizeText("wiredfurni.params.startdir")}</Text>
        <Flex gap={1}>
          {directionOptions.map(value => {
            return (
              <Flex key={value.value} alignItems="center" gap={1}>
                <input
                  className="form-check-input"
                  type="radio"
                  name="movement"
                  id={`movement${value.value}`}
                  checked={movement === value.value}
                  onChange={event => setMovement(value.value)}
                />
                <Text>
                  <i className={`icon icon-${value.icon}`} />
                </Text>
              </Flex>
            );
          })}
        </Flex>
      </Column>
    </WiredActionBaseView>
  );
};
