import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { updateDatabase } from '../../../database/database'
import { SketchPicker } from 'react-color';
import styled from 'styled-components';

const ColorContainer = styled.div`
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
`;

const ColorOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
`;

const ColorPicker = styled.div`
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
`;

const ColorButton = styled.button`
  display: block;
  width: 36px;
  height: 36px;
  margin: 10px;
  border: 1px solid #000000;
  cursor: pointer;
  background-color: ${props => props.$backgroundColor}
`;

const ColorInput = styled.input`
  height: 36px;
  width: 36px;
  font-size: 18px;
  text-align: center;
  margin: 10px;
`

const BackgroundGradient = styled.div`
  width: 100px;
  height: 100px;
  background: ${props => props.$backgroundGradient};
  margin: 10px;
`;

const SwitchButton = ({ props }) => {
  const database = useSelector((state) => state.database.value);
  const dispatch = useDispatch();

  const { id, value, settings, selected } = props;

  const valueChange = (e) => {
    console.log(id, e.target.checked);
    const display = e.target.checked ? "revert-layer" : "none";

    console.log(display);

    // const key = settings.id;
    // const newStyles = { ...database[id].styles, [key]: display };
    // const newParams = { ...database[id], styles: newStyles };
    // const newDatabase = { ...database, [id]: newParams };
    // dispatch(updateDatabase(newDatabase));
  }

  return (
    <label className="ld-switch">
      <input className='ld-switch-checkbox' type="checkbox" onChange={valueChange} />
      <span className="ld-switch-slider"></span>
    </label>
  )
}

const SlideRange = ({ props }) => {
  const { id, value, settings, selected } = props;

  const valueChange = (e) => {
    console.log(id, e.target.value)
  }

  return (
    <div className="ld-slide-range">
      <input type="range" min="0" max="100" defaultValue="50" className="ld-slide-range-line" onInput={valueChange} />
    </div>
  )
}

const SelectField = ({ props }) => {
  console.log(props);
  const { id, value, settings, selected } = props;
  const selects = settings.selects;

  const handleChange = () => {

  }

  return (
    <select value={selected} onChange={handleChange}>
      {
        selects.map((select, index) => <option value={select} key={index}>{select}</option>)
      }
    </select>
  )
}

const ColorPick = ({ props, inital, handle }) => {
  const database = useSelector((state) => state.database.value);
  const dispatch = useDispatch();

  const { id, value, settings, selected } = props;
  const initalValue = inital ? inital : selected === "color" ? value : "#f00";
  const key = settings.id;

  const [color, setColor] = useState(initalValue);
  const [display, setDisplay] = useState(false);

  const valueChange = (color) => {
    setColor(color.hex);
  }

  const valueSave = () => {
    setDisplay(!display);

    if (handle) {
      handle(color);
      return;
    }

    const newStyles = { ...database[id].styles, [key]: color };
    const newParams = { ...database[id], styles: newStyles };
    const newDatabase = { ...database, [id]: newParams };
    dispatch(updateDatabase(newDatabase));
  }

  const showHandle = () => {
    setDisplay(!display);
  }

  return (
    <ColorContainer>
      <ColorButton $backgroundColor={color} onClick={showHandle} />

      {display &&
        <>
          <ColorOverlay onClick={valueSave} />
          <ColorPicker>
            <SketchPicker color={color} onChange={valueChange} />
          </ColorPicker>
        </>
      }
    </ColorContainer>
  )
}

const ColorGradientPick = ({ props }) => {
  const database = useSelector((state) => state.database.value);
  const dispatch = useDispatch();

  let initalAngel = 0;
  let initalColor1 = "#000";
  let initalColor2 = "#fff";

  const { id, value, settings, selected } = props;
  const key = settings.id;

  if (selected === "gradient") {
    const gradient = value.substring(16, value.length - 1).split(",");
    initalAngel = gradient[0].replace("deg", "");
    initalColor1 = gradient[1].trim();
    initalColor2 = gradient[2].trim();
  }

  const [angle, setAngle] = useState(initalAngel);
  const [colorStart, setColorStart] = useState(initalColor1);
  const [colorEnd, setColorEnd] = useState(initalColor2);

  const backgroundGradient = `linear-gradient(${angle}deg, ${colorStart}, ${colorEnd})`

  const clickHandle = () => {
    const newStyles = { ...database[id].styles, [key]: backgroundGradient };
    const newParams = { ...database[id], styles: newStyles };
    const newDatabase = { ...database, [id]: newParams };
    dispatch(updateDatabase(newDatabase));
  }

  return (
    <ColorContainer>
      <ColorInput value={angle} onChange={(evt) => setAngle(evt.target.value)} />
      <ColorPick props={props} inital={initalColor1} handle={setColorStart} />
      <ColorPick props={props} inital={initalColor2} handle={setColorEnd} />
      <BackgroundGradient $backgroundGradient={backgroundGradient} onClick={clickHandle} />
    </ColorContainer>
  )
}

export { SwitchButton, SlideRange, SelectField, ColorPick, ColorGradientPick }