import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from 'react';
import { Collapse, Modal, Row, Col, Select, Slider, Checkbox, Button } from '@whalecloud/fdx';
import { connect } from "../../../../redux";
import { toolCollapseAttr } from "../../../../utils";
import ColorPicker from "../../../elementSettings/components/ColorPicker";
import styles from "./index.module.less";
var Panel = Collapse.Panel;
var Option = Select.Option;

var ShowColor = function ShowColor(props) {
  var _props$colors = props.colors,
      colors = _props$colors === void 0 ? [] : _props$colors,
      _props$name = props.name,
      name = _props$name === void 0 ? '' : _props$name;
  return /*#__PURE__*/React.createElement("div", null, colors === null || colors === void 0 ? void 0 : colors.map(function (v, index) {
    return /*#__PURE__*/React.createElement("span", {
      className: styles.roundColor,
      style: {
        backgroundColor: v
      }
    });
  }), name);
};

var ClickColor = function ClickColor(props) {
  var _props$colors2 = props.colors,
      colors = _props$colors2 === void 0 ? [] : _props$colors2,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      defaultValue = props.defaultValue;

  var _useState = useState(defaultValue || ''),
      _useState2 = _slicedToArray(_useState, 2),
      selectColor = _useState2[0],
      setSelectColor = _useState2[1];

  var _useState3 = useState('#333'),
      _useState4 = _slicedToArray(_useState3, 2),
      primaryColorPicker = _useState4[0],
      setPrimaryColorPicker = _useState4[1];

  var lightColors = ['#ffffff', '#f3f6f8'];

  var handleColorChange = function handleColorChange(value) {
    if (value) {
      onChange(value);
      setPrimaryColorPicker(value);
    }
  };

  var handleClickColor = function handleClickColor(value) {
    if (value) {
      setSelectColor(value);
      onChange(value);
    }
  };

  return /*#__PURE__*/React.createElement("div", null, Array.isArray(colors) && (colors === null || colors === void 0 ? void 0 : colors.map(function (v, index) {
    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(styles.roundBigColor, " ").concat(v === selectColor ? styles.active : ''),
      onClick: function onClick() {
        return handleClickColor(v);
      }
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        backgroundColor: v,
        border: "1px solid",
        borderColor: lightColors.includes(v) ? '#ddd' : v
      }
    }));
  })), /*#__PURE__*/React.createElement(ColorPicker, {
    value: primaryColorPicker,
    valueChange: function valueChange(value) {
      return handleColorChange(value);
    }
  }));
};

var themeColor = [{
  name: 'Blue',
  value: 'blue',
  colors: ['#4477ee', '#eff6ee', '#0395ea', '#7a1422']
}, {
  name: 'Red',
  value: 'red',
  colors: ['#dc3023', '#9197ae', '#eff6ee', '#56a3a6']
}, {
  name: 'Violet',
  value: 'violet',
  colors: ['#8e44ad', '#c179b9', '#502274', '#2f242c']
}];
var fontList = [{
  name: 'Nunitosans',
  value: 'nunitosans'
}, {
  name: 'Arial',
  value: 'Arial'
}];
var spaceType = {
  Smaller: styles.small,
  Normal: styles.normal,
  Larger: styles.larger
};
var borderType = {
  None: styles.none,
  Soft: styles.soft,
  Rounded: styles.rounded
};

var ModalGlobalTheme = function ModalGlobalTheme(props) {
  var visible = props.visible,
      handleVisible = props.handleVisible,
      clearThemeStyle = props.clearThemeStyle,
      themeStyle = props.themeStyle,
      saveThemeStyle = props.saveThemeStyle;

  var _useState5 = useState(themeColor[0].colors),
      _useState6 = _slicedToArray(_useState5, 2),
      colorsValue = _useState6[0],
      setColorsValue = _useState6[1];

  var _useState7 = useState(["#ffffff", "#f3f6f8", "#222222", colorsValue[0]]),
      _useState8 = _slicedToArray(_useState7, 2),
      backgroundColors = _useState8[0],
      setBackgroundColors = _useState8[1];

  var _useState9 = useState(["#ffffff", "#f3f6f8", "#444444", colorsValue[0]]),
      _useState10 = _slicedToArray(_useState9, 2),
      headerColors = _useState10[0],
      setHeaderColors = _useState10[1];

  var _useState11 = useState({}),
      _useState12 = _slicedToArray(_useState11, 2),
      initvalue = _useState12[0],
      setInitvalue = _useState12[1];

  var handleThemeColors = function handleThemeColors(value) {
    setColorsValue(themeColor.filter(function (v) {
      return v.value === value;
    })[0].colors);
  };

  var SpaceBox = function SpaceBox(_ref) {
    var spaceType = _ref.spaceType,
        onChange = _ref.onChange;
    var mapType = {
      Larger: '5px',
      Normal: '4px',
      Smaller: '3px'
    };
    var getDefault = Object.keys(mapType).filter(function (v) {
      return mapType[v] === themeStyle['@theme-space-base'];
    });

    var _useState13 = useState(getDefault[0] || ''),
        _useState14 = _slicedToArray(_useState13, 2),
        selectType = _useState14[0],
        setSelectType = _useState14[1];

    var handleClick = function handleClick(value) {
      saveThemeStyle({
        '@theme-space-base': mapType[value]
      });
      setSelectType(value);
      onChange(value);
    };

    return /*#__PURE__*/React.createElement(Row, null, Object.keys(spaceType).map(function (v) {
      return /*#__PURE__*/React.createElement(Col, {
        span: 8
      }, /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          return handleClick(v);
        },
        className: "".concat(styles.spaceBoxWrap, " ").concat(spaceType[v], " ").concat(selectType === v ? styles.active : '')
      }, /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement("div", {
        className: styles.title
      }, v));
    }));
  };

  var BorderBox = function BorderBox(_ref2) {
    var borderType = _ref2.borderType,
        onChange = _ref2.onChange;
    var mapType = {
      Rounded: '100px',
      Soft: '3px',
      None: '0'
    };
    var getDefault = Object.keys(mapType).filter(function (v) {
      return mapType[v] === themeStyle['@theme-border-radius'];
    });

    var _useState15 = useState(getDefault[0] || ''),
        _useState16 = _slicedToArray(_useState15, 2),
        selectType = _useState16[0],
        setSelectType = _useState16[1];

    var handleClick = function handleClick(value) {
      saveThemeStyle({
        '@theme-border-radius': mapType[value]
      });
      setSelectType(value);
      onChange(value);
    };

    return /*#__PURE__*/React.createElement(Row, null, Object.keys(borderType).map(function (v) {
      return /*#__PURE__*/React.createElement(Col, {
        span: 8
      }, /*#__PURE__*/React.createElement("div", {
        onClick: function onClick() {
          return handleClick(v);
        },
        className: "".concat(styles.borderBoxWrap, " ").concat(borderType[v], " ").concat(selectType === v ? styles.active : '')
      }), /*#__PURE__*/React.createElement("div", {
        className: styles.title
      }, v));
    }));
  };

  useEffect(function () {
    var currentColor = backgroundColors.slice(0, 3).concat(colorsValue[0]);
    setBackgroundColors(currentColor);
    setHeaderColors(currentColor);
    setInitvalue(_objectSpread({}, themeStyle));
  }, [colorsValue]);

  var handleShadow = function handleShadow(e) {
    if (e.target.checked) {
      window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
        '@theme-box-shadow-state': true
      }));
      saveThemeStyle({
        '@theme-box-shadow-state': true
      });
    } else {
      window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
        '@theme-box-shadow-state': false
      }));
      saveThemeStyle({
        '@theme-box-shadow-state': false
      });
    }
  };

  var handleBackgroundColor = function handleBackgroundColor(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-page-bg': value
    }));
    saveThemeStyle({
      '@theme-page-bg': value
    });
  };

  var handleFontSize = function handleFontSize(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-font-size': value
    }));
    saveThemeStyle({
      '@theme-font-size': value
    });
  };

  var handleFontChange = function handleFontChange(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-font-family': value
    }));
    saveThemeStyle({
      '@theme-font-family': value
    });
  };

  var handleHeaderSize = function handleHeaderSize(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-header-size': "".concat(value, "px")
    }));
    saveThemeStyle({
      '@theme-header-size': "".concat(value, "px")
    });
  };

  var handleHeaderBg = function handleHeaderBg(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-header-bg': value
    }));
    saveThemeStyle({
      '@theme-header-bg': value
    });
  };

  var handleBorderType = function handleBorderType(value) {
    var mapType = {
      Rounded: '100px',
      Soft: '3px',
      None: '0'
    };
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-border-radius': mapType[value]
    }));
  };

  var handleSpaceType = function handleSpaceType(value) {
    var mapType = {
      Larger: '5px',
      Normal: '4px',
      Smaller: '3px'
    };
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@theme-space-base': mapType[value]
    }));
  };

  var handlePrimaryColor = function handlePrimaryColor(value) {
    window.less.modifyVars(_objectSpread(_objectSpread({}, initvalue), {}, {
      '@primary-color': value
    }));
    saveThemeStyle({
      '@primary-color': value
    });
  };

  var handleReset = function handleReset() {
    clearThemeStyle();
  };

  return /*#__PURE__*/React.createElement(Modal, {
    visible: visible,
    onCancel: function onCancel() {
      return handleVisible(false);
    },
    width: 600,
    footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: function onClick() {
        return handleReset();
      }
    }, "Reset Theme Editor"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        return handleVisible(false);
      }
    }, "Close")),
    className: styles.wrap
  }, /*#__PURE__*/React.createElement(Collapse, Object.assign({}, toolCollapseAttr, {
    defaultActiveKey: ['1', '2', '3']
  }), /*#__PURE__*/React.createElement(Panel, {
    header: 'Theme colors',
    key: "1"
  }, /*#__PURE__*/React.createElement(Row, {
    gutter: 80
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Use one of the ", themeColor.length, " available palettes"), /*#__PURE__*/React.createElement(Select, {
    defaultValue: themeColor[0].value,
    style: {
      width: '100%'
    },
    onChange: handleThemeColors
  }, themeColor === null || themeColor === void 0 ? void 0 : themeColor.map(function (vl) {
    return /*#__PURE__*/React.createElement(Option, {
      value: vl === null || vl === void 0 ? void 0 : vl.value,
      key: vl.value
    }, /*#__PURE__*/React.createElement(ShowColor, {
      name: vl === null || vl === void 0 ? void 0 : vl.name,
      colors: vl === null || vl === void 0 ? void 0 : vl.colors
    }));
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Primary"), /*#__PURE__*/React.createElement(ClickColor, {
    defaultValue: initvalue['@primary-color'],
    colors: colorsValue,
    onChange: handlePrimaryColor
  })), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Background"), /*#__PURE__*/React.createElement(ClickColor, {
    defaultValue: initvalue['@theme-page-bg'],
    colors: backgroundColors,
    onChange: handleBackgroundColor
  })), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Header"), /*#__PURE__*/React.createElement(ClickColor, {
    defaultValue: initvalue['@theme-header-bg'],
    colors: headerColors,
    onChange: handleHeaderBg
  })))), /*#__PURE__*/React.createElement(Panel, {
    header: 'Typography',
    key: "2"
  }, /*#__PURE__*/React.createElement(Row, {
    gutter: 80
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Font"), /*#__PURE__*/React.createElement(Select, {
    defaultValue: initvalue['@theme-font-family'],
    style: {
      width: '100%'
    },
    onChange: handleFontChange
  }, fontList === null || fontList === void 0 ? void 0 : fontList.map(function (vl) {
    return /*#__PURE__*/React.createElement(Option, {
      value: vl === null || vl === void 0 ? void 0 : vl.value,
      key: vl.value
    }, vl.name);
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4"
  }, /*#__PURE__*/React.createElement("h4", null, "Font Size"), /*#__PURE__*/React.createElement(Slider, {
    defaultValue: parseInt(initvalue['@theme-font-size'], 10),
    max: 70,
    onChange: handleFontSize
  })))), /*#__PURE__*/React.createElement(Panel, {
    header: 'Structure',
    key: "3"
  }, /*#__PURE__*/React.createElement(Row, {
    gutter: 80
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4",
    style: {
      height: 100
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Spacing"), /*#__PURE__*/React.createElement(SpaceBox, {
    spaceType: spaceType,
    onChange: handleSpaceType
  })), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    className: "mb-4",
    style: {
      height: 100
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Header Size"), /*#__PURE__*/React.createElement(Slider, {
    defaultValue: parseInt(initvalue['@theme-header-size'], 10),
    max: 150,
    onChange: handleHeaderSize
  })), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    style: {
      height: 100
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Border"), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(BorderBox, {
    borderType: borderType,
    onChange: handleBorderType
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12,
    style: {
      height: 100
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Shadow"), /*#__PURE__*/React.createElement(Checkbox, {
    defaultChecked: initvalue['@theme-box-shadow-state'],
    onChange: handleShadow
  }), " Apply shadow effect")))));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    clearThemeStyle: function clearThemeStyle() {
      dispatch({
        type: 'style/clearThemeStyle',
        payload: {}
      });
    },
    saveThemeStyle: function saveThemeStyle(payload) {
      dispatch({
        type: 'style/saveThemeStyle',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  return {
    themeStyle: state.style.themeStyle
  };
}, mapDispatchToProps)(ModalGlobalTheme);
//# sourceMappingURL=index.js.map