'use strict'
!(function(require, directRequire) {
  var a, b, c
  const d = require('react'),
    e = require('./bc04f89cf8edab62335086e0a2a5a103.js'),
    f = require('./de640e457745362cd277fa7e893af981.js'),
    g = require('./common/locales/index.js'),
    h = require('./logger.js'),
    i = 'appearance'
  module.exports = ((b = a = class extends d.Component {
    constructor(a) {
      super(a), c.call(this)
      let { settings: b } = this.props
      const d = b.fontSize || 12
      let e
      ;(e = b.lineHeight ? (b.lineHeight >= d ? b.lineHeight - d : 0) : 0),
        (this.state = {
          _fontFamilyOpen: !1,
          _fontFamilySelectedIndex: 0,
          _fontFamilyLeft: '0px',
          _fontFamilyTop: '0px',
          _showMask: !1,
          theme: b.theme || 'white',
          fontFamily: b.fontFamily || 'Arial',
          fontSize: d,
          lineSpacing: e
        }),
        this.setupConstants(),
        this.setupControllers()
    }
    setupConstants() {}
    setupControllers() {
      const a = this
      this.fontFamilyController = new class {
        constructor() {
          ;(this.fontFamilyList = [a.state.fontFamily]),
            (this.toggle = async () => {
              if (!!a.state._fontFamilyOpen)
                a.setState({ _fontFamilyOpen: !1, _showMask: !1 })
              else if (1 === this.fontFamilyList.length) {
                this.fontFamilyList = await f()
                let b = this.fontFamilyList.indexOf(a.state.fontFamily)
                ;-1 === b && (b = 0)
                const c = a.fontInput.getBoundingClientRect()
                a.setState({
                  _fontFamilyOpen: !0,
                  _fontFamilySelectedIndex: b,
                  _fontFamilyLeft: c.left + 'px',
                  _fontFamilyTop: c.top + 25 + 'px',
                  _showMask: !0
                })
              } else {
                const b = a.fontInput.getBoundingClientRect()
                a.setState({
                  _fontFamilyOpen: !0,
                  _fontFamilyLeft: b.left + 'px',
                  _fontFamilyTop: b.top + 25 + 'px',
                  _showMask: !0
                })
              }
            }),
            (this.onItemSelected = (b, c) => {
              const d = { _fontFamilyOpen: !1, _showMask: !1 }
              b !== a.state._fontFamilySelectedIndex &&
                ((d._fontFamilySelectedIndex = b), (a.state.fontFamily = c)),
                a.props.updateIDESetting(i, 'fontFamily', c),
                a.setState(d)
            }),
            (this.getItemStyle = a => {
              return { fontFamily: this.fontFamilyList[a] }
            })
        }
      }()
    }
    getSetting() {
      const {
        theme: a,
        fontFamily: b,
        fontSize: c,
        lineSpacing: d
      } = this.state
      return { theme: a, fontFamily: b, fontSize: c, lineHeight: d + c }
    }
    render() {
      return d.createElement(
        'div',
        { className: 'setting-theme ui-form' },
        this.state._showMask
          ? d.createElement('div', {
              className: 'ui-mask ui-mask-transparent',
              onClick: this.handleMaskClick
            })
          : null,
        d.createElement(
          'div',
          { className: 'ui-form-item ui-form-item-inline ui-form-item-vt' },
          d.createElement(
            'label',
            { htmlFor: '', className: 'ui-form-label' },
            g.config.SETTING_THEME
          ),
          d.createElement(
            'div',
            { className: 'ui-form-controls' },
            d.createElement(
              'label',
              {
                htmlFor: '',
                className: 'ui-radio',
                onClick: this.handleThemeClick,
                'data-theme': 'dark'
              },
              d.createElement('i', {
                className:
                  'dark' === this.state.theme
                    ? 'ui-icon-radio-o'
                    : 'ui-icon-radio'
              }),
              d.createElement(
                'span',
                { className: 'ui-radio-text' },
                g.config.SETTING_THEME_DARK
              )
            ),
            d.createElement(
              'label',
              {
                htmlFor: '',
                className: 'ui-radio',
                onClick: this.handleThemeClick,
                'data-theme': 'white'
              },
              d.createElement('i', {
                className:
                  'white' === this.state.theme
                    ? 'ui-icon-radio-o'
                    : 'ui-icon-radio'
              }),
              d.createElement(
                'span',
                { className: 'ui-radio-text' },
                g.config.SETTING_THEME_WHITE
              )
            )
          )
        ),
        d.createElement(
          'div',
          { className: 'ui-form-item ui-form-item-inline' },
          d.createElement(
            'label',
            { htmlFor: '', className: 'ui-form-label' },
            g.config.SETTING_FONT_FAMILY
          ),
          d.createElement(
            'div',
            { className: 'ui-form-controls' },
            d.createElement(
              'div',
              {
                className: 'ui-selector ui-selector-default',
                onClick: this.fontFamilyController.toggle
              },
              d.createElement(
                'p',
                {
                  className: 'ui-selector-input',
                  ref: a => (this.fontInput = a)
                },
                this.fontFamilyController.fontFamilyList[
                  this.state._fontFamilySelectedIndex
                ]
              ),
              d.createElement(
                'div',
                { className: 'ui-selector-dropdown' },
                d.createElement('i', { className: 'ui-icon-arrow-down-o' })
              ),
              d.createElement(e, {
                width: '207px',
                height: '100px',
                top: this.state._fontFamilyTop,
                left: this.state._fontFamilyLeft,
                open: this.state._fontFamilyOpen,
                items: this.fontFamilyController.fontFamilyList,
                selectedIndex: this.state._fontFamilySelectedIndex,
                getItemStyle: this.fontFamilyController.getItemStyle,
                onItemSelected: this.fontFamilyController.onItemSelected
              })
            )
          )
        ),
        d.createElement(
          'div',
          { className: 'ui-flex' },
          d.createElement(
            'div',
            { className: 'ui-flex-item' },
            d.createElement(
              'div',
              { className: 'ui-form-item ui-form-item-inline' },
              d.createElement(
                'label',
                { htmlFor: '', className: 'ui-form-label' },
                g.config.SETTING_FONT_SIZE
              ),
              d.createElement(
                'div',
                { className: 'ui-form-controls' },
                d.createElement(
                  'div',
                  { className: 'ui-input-box' },
                  d.createElement('input', {
                    type: 'number',
                    placeholder: '',
                    value: this.state.fontSize,
                    className: 'ui-input',
                    onChange: this.handleFontSizeChange
                  })
                )
              )
            )
          ),
          d.createElement(
            'div',
            { className: 'ui-flex-item' },
            d.createElement(
              'div',
              { className: 'ui-form-item ui-form-item-inline' },
              d.createElement(
                'label',
                { htmlFor: '', className: 'ui-form-label' },
                g.config.SETTING_LINE_SPACING
              ),
              d.createElement(
                'div',
                { className: 'ui-form-controls' },
                d.createElement(
                  'div',
                  { className: 'ui-input-box' },
                  d.createElement('input', {
                    type: 'number',
                    placeholder: '',
                    value: this.state.lineSpacing,
                    className: 'ui-input',
                    onChange: this.handleLineSpacingChange
                  })
                )
              )
            )
          )
        )
      )
    }
  }),
  (c = function() {
    ;(this.handleThemeClick = a => {
      const b = a.currentTarget.dataset.theme
      this.props.updateIDESetting(i, 'theme', b), this.setState({ theme: b })
    }),
      (this.handleFontSizeChange = a => {
        let b = parseInt(a.target.value)
        0 >= b && (b = 1),
          this.props.updateIDESetting(i, 'fontSize', b),
          this.props.updateIDESetting(
            i,
            'lineHeight',
            b + this.state.lineSpacing
          ),
          this.setState({ fontSize: b })
      }),
      (this.handleLineSpacingChange = a => {
        const b = parseInt(a.target.value)
        0 > b && (b = 0),
          this.props.updateIDESetting(i, 'lineHeight', b + this.state.fontSize),
          this.setState({ lineSpacing: b })
      }),
      (this.handleMaskClick = () => {
        this.setState({ _fontFamilyOpen: !1, _showMask: !1 })
      })
  }),
  b)
})(require('lazyload'), require)
