import React, {useState} from "react";
import {Button, CustomInput, FormGroup, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
import ColorPicker from "../Misc/ColorPicker";
import BrightnessSlider from "../Misc/BrightnessSlider";

function ColorModal({cValue, bValue, pValue, onConfirm, onCancel}) {
  const [color, setColor] = useState(cValue);
  const [brightness, setBrightness] = useState(bValue);
  const [power, setPower] = useState(pValue);

  return (
    <Modal isOpen={true}>
      <ModalHeader>Fargevalg</ModalHeader>
      <ModalBody style={{margin: "0 auto"}}>
        <FormGroup>
          <ColorPicker color={color} onChange={setColor}/>
        </FormGroup>
        <FormGroup>
          <BrightnessSlider brightness={brightness} onChange={setBrightness}/>
        </FormGroup>
        <FormGroup className="on-switch">
          <CustomInput type="switch"
                       id="switch-power"
                       name="power"
                       label={power ? "På" : "Av"}
                       checked={power}
                       onChange={e => setPower(e.target.checked)}/>
        </FormGroup>
      </ModalBody>
      <ModalFooter>
        <Button color="primary" onClick={() => onConfirm(color, brightness, power)}>Lagre</Button>
        {" "}
        <Button color="secondary" onClick={onCancel}>Avbryt</Button>
      </ModalFooter>
    </Modal>
  );
}

export default ColorModal;