import React, { useEffect, useState } from 'react';
import { Button } from '../Button';
import { ThemeColors } from '../../styles/theme';
import { useColors } from '../../hooks/useColors';
import { EBrandingColorsOptions } from '../../types/theme';
import { ChromePicker } from 'react-color';
import { Popup } from '../Popup';

export const Editor = () => {
  const { colors, setColors } = useColors();
  const [state, setState] = useState({ ...colors });

  useEffect(() => {
    setState(colors);
  }, [colors]);

  const handleChange = (key, val) => {
    let newState = { ...state };
    newState[key] = val;
    setState(newState);
  };
  return (
    <div>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'start',
        }}
      >
        {Object.keys(EBrandingColorsOptions).map((key, index) => {
          return (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                margin: '.5rem',
                // border: '1px solid #828282',
                boxShadow: '0 0 8px rgba(0,0,0,0.3)',
                borderRadius: '4px 4px 10px 10px',
              }}
            >
              <label
                style={{
                  width: '130px',
                  overflowY: 'hidden',
                  textAlign: 'center',
                  padding: '5px 0',
                  color: '#4f4f4f',
                  fontFamily: 'Montserrat',
                  fontSize: '12px',
                }}
              >
                {key}
              </label>
              <Popup
                body={
                  <ColorPicker
                    value={state[key]}
                    handleChange={handleChange}
                    index={key}
                  />
                }
              >
                <div
                  style={{
                    cursor: 'pointer',
                    width: '130px',
                    background: state[key],
                    height: '100px',
                    borderTop: '1px solid #e7e7e7',
                    borderRadius: '0 0 10px 10px',
                  }}
                ></div>
              </Popup>
            </div>
          );
        })}
      </div>

      <div
        style={{
          display: 'flex',
          right: '2rem',
          position: 'fixed',
          bottom: '2rem',
        }}
      >
        <Button
          style={{ marginRight: '10px' }}
          theme="primary"
          sizer="S"
          onClick={() => {
            setColors({ ...state });
            localStorage.setItem('colors', JSON.stringify(state));
            alert('Applied');
          }}
        >
          Apply Theme
        </Button>
        <Button
          style={{ marginRight: '10px' }}
          theme="secondary"
          sizer="S"
          onClick={() => {
            setColors({ ...ThemeColors });
            localStorage.setItem('colors', JSON.stringify(ThemeColors));
            alert('Reset');
          }}
        >
          Reset
        </Button>
        <Button
          style={{ marginRight: '10px' }}
          theme="secondary"
          sizer="S"
          onClick={() => {
            let newState = { ...state };
            newState['opacityBackground'] = newState['bg_system'];
            const el = document.createElement('textarea');
            el.value = JSON.stringify(newState);

            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            alert('Palette Copied Successfully');
          }}
        >
          Copy color palette
        </Button>
      </div>
    </div>
  );
};

const ColorPicker = ({ value, handleChange, index }) => {
  return (
    <div>
      <ChromePicker
        disableAlpha
        color={value}
        onChange={(color) => {
          handleChange(index, color.hex);
        }}
      />
    </div>
  );
};

{
  /* <table>
        <tbody>
          {Object.keys(EBrandingColorsOptions).map((key, index) => {
            return (
              <tr key={index}>
                <td>{key}</td>
                <td>
                  <input
                    type="text"
                    value={state[key]}
                    onChange={(e) => {
                      handleChange(key, e.target.value);
                    }}
                  />
                </td>
                <td>
                  <Popup
                    body={
                      <ColorPicker
                        value={state[key]}
                        handleChange={handleChange}
                        index={key}
                      />
                    }
                  >
                    <div
                      style={{
                        width: '100px',
                        background: state[key],
                        height: '17px',
                      }}
                    ></div>
                  </Popup>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table> */
}