import { createElement, useState, useEffect } from 'react';
import { NumberPicker, Overlay } from '@alifd/next';
import { SketchPicker } from 'react-color';
import PropTypes from 'prop-types';

const { Popup } = Overlay;

import './index.scss';

function split(value) {
  const values = [];
  let parenthesesCount = 0;
  let len = 0;

  value = value.trim().replace(/\s+/, '\u0020');

  for (let i = 0; i < value.length; i++) {
    const c = value[i];

    if (c === '(') parenthesesCount++;
    else if (c === ')') parenthesesCount--;

    if (c === '\u0020' && parenthesesCount === 0) len++;
    else values[len] ? (values[len] += c) : (values[len] = c);
  }

  return values;
}

// x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
// 12px 12px 2px 1px rgba(0, 0, 255, .2)
function parseVal(value) {
  const values = split(value);

  return values.map(v => {
    const ret = v.match(/^([-\d.]+)(.+)/);

    return ret
      ? {
          val: parseFloat(ret[1]),
          unit: ret[2],
        }
      : {
          val: v,
        };
  });
}

function joinVal(values) {
  return values.map(v => v.val + (v.unit || '')).join(' ');
}

function rgbaVal(rgba) {
  if (typeof rgba === 'object') {
    const { r, g, b, a } = rgba;
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  } else {
    return rgba;
  }
}

export default function ShadowEditor(props) {
  const [visible, setVisible] = useState(false);

  const { name, value } = props.variable;
  const values = parseVal(value);
  const [color, setColor] = useState(values[4].val);

  function hanldeChange(val, index) {
    const newVal = [...values];

    newVal[index].val = val;

    props.onChange(name, joinVal(newVal), value);
  }

  function handleChangeComplete(color) {
    setColor(color.rgb);
    hanldeChange(rgbaVal(color.rgb), 4);
  }

  function onVisibleChange(v) {
    setVisible(v);
  }

  useEffect(() => {
    const { value } = props.variable;
    setColor(parseVal(value)[4].val);
  });

  return (
    <div className='shadow-editor'>
      <p className='title'>阴影</p>
      <div className='grid'>
        {['X', 'Y', 'Blur', 'Spread'].map((key, index) => (
          <>
            <div className='row'>{key}</div>
            <NumberPicker
              value={values[index].val}
              onChange={v => hanldeChange(v, index)}
            />
          </>
        ))}
        <div className='row'>Color</div>
        <Popup
          offset={[10, 10]}
          visible={visible}
          trigger={
            <div className='swatch'>
              <div
                className='color-block'
                style={{ background: rgbaVal(color) }}
              ></div>
            </div>
          }
          triggerType='click'
          onVisibleChange={onVisibleChange}
        >
          <SketchPicker color={color} onChangeComplete={handleChangeComplete} />
        </Popup>
      </div>
    </div>
  );
}

ShadowEditor.propTypes = {
  variable: PropTypes.shape({
    name: PropTypes.string,
    value: PropTypes.any,
  }),
  onChange: PropTypes.func,
  className: PropTypes.string,
};