import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { Switch, EasyRange, FormItem } from '@easyv/react-gui';
import { updateScreenFilter } from 'models/screen';
import style from './ScreenFilter.less';

function ScreenFilter({ config = {}, updateScreenFilter, onClose }: { onClose; config: any; updateScreenFilter: (config) => any }) {
  const { open = false, hue = 0, saturate = 0, brightness = 0, contrast = 0, opacity = 100, grayscale = 0 } = config;
  const handleUpdate = (value) => {
    updateScreenFilter({
      config: {
        ...config,
        ...value
      }
    });
  };

  return (
    <div className={style.drawerTitle}>
      <div className={style.state}>
        <label className={open ? style.open : ''}>状态</label>
        <Switch checked={open} onChange={(value) => handleUpdate({ open: value })} />
      </div>
      {open && (
        <Fragment>
          <FormItem label="色相">
            <div className={style.hue}>
              <EasyRange min={-180} max={180} value={hue} onChange={(value) => handleUpdate({ hue: value })} />
            </div>
          </FormItem>
          <FormItem label="饱和度">
            <div className={style.saturate}>
              <EasyRange min={-100} max={100} value={saturate} onChange={(value) => handleUpdate({ saturate: value })} />
            </div>
          </FormItem>
          <FormItem label="明度">
            <div className={style.brightness}>
              <EasyRange min={-100} max={100} value={brightness} onChange={(value) => handleUpdate({ brightness: value })} />
            </div>
          </FormItem>
          <FormItem label="对比度">
            <div className={style.contrast}>
              <EasyRange min={-100} max={100} value={contrast} onChange={(value) => handleUpdate({ contrast: value })} />
            </div>
          </FormItem>
          <FormItem label="不透明度">
            <div className={style.opacity}>
              <EasyRange min={0} max={100} value={opacity} onChange={(value) => handleUpdate({ opacity: value })} />
            </div>
          </FormItem>
          <FormItem label="灰度">
            <div className={style.grayscale}>
              <EasyRange min={0} max={100} value={grayscale} onChange={(value) => handleUpdate({ grayscale: value })} />
            </div>
          </FormItem>
        </Fragment>
      )}
    </div>
  );
}

const mapStateToProps = ({ createApp, screensById }) => {
  const { id } = createApp;
  const screen = screensById[id];
  let config = {};
  if (screen) {
    const { globalFilter } = screen;
    config = globalFilter;
  }

  return {
    config
  };
};

const mapDispatchToProps = {
  updateScreenFilter
};

export default connect(mapStateToProps, mapDispatchToProps)(ScreenFilter);
