// const React = window.React
// const Icon = window.Icon
import React from 'react'
import * as Icon from '@dp/icon-aeolus'
import Localize, {
  localize
} from '@datawind/extension-localize'

const {
  IconDashboardBiankuang,
  IconDashboardXiankuan,
  IconDashboardYanse,
  IconRotateRight,
  IconLinetype,
  IconDatawindLineDot,
  IconDatawindLineFull,
  IconDatawindLineImaginary
} = Icon

const Settings = () => ({
  defaultValue: {
    custom: {
      backgroundColor: '#21252C',
      shadowColor: 'rgba(0,0,0,0.25)',
      borderColor: '#E3E5EB',
      borderStyle: 'solid',
      borderWidth: 0,
      shadowX: 0,
      shadowY: 0,
      shadowB: 0,
      shadowS: 0,
    },
    width: 40,
    height: 40,
    isFollowTheme: true,
  },
  config: [
    {
      type: 'collapse-pane',
      title: localize("settings.graphicsStyle"),
      key: 'diagram-style-panel',
      children: [
        {
          type: 'form-item',
          label: localize("settings.fill"),
          children: [
            {
              type: 'input-color-picker',
              size: 3,
              valuePath: 'properties.custom.backgroundColor',
              get tooltip() {
                return localize("settings.fillColor")
              },
              prefix: <IconDashboardYanse style={{ fontSize: 16 }} />,
            },
          ]
        },
        {
          type: 'form-item',
          label: localize("settings.stroke"),
          children: [
            {
              type: 'input-color-picker',
              size: 3,
              valuePath: 'properties.custom.borderColor',
              get tooltip() {
                return localize("settings.strokeColor")
              },
              prefix: <IconDashboardBiankuang style={{ fontSize: 16 }} />,
            }, {
              type: 'select',
              size: 3,
              range: [0, 10],
              valuePath: 'properties.custom.borderWidth',
              get tooltip() {
                return localize("settings.strokeSize")
              },
              prefix: <IconDashboardXiankuan style={{ fontSize: 16 }} />,
            },
            {
              type: 'select',
              size: 3,
              valuePath: 'properties.custom.borderStyle',
              get tooltip() {
                return localize("settings.strokeStyle")
              },
              options: [
                {
                  name: localize("settings.strokeSolid"),
                  value: 'solid',
                  label: (<div style={{ fontSize: 12 }}><IconDatawindLineFull style={{ marginRight: 6 }} />{localize("settings.strokeSolid")}</div>)
                },
                {
                  name: localize("settings.strokeDashed"),
                  value: 'dashed',
                  label: (<div style={{ fontSize: 12 }}><IconDatawindLineImaginary style={{ marginRight: 6 }} />{localize("settings.strokeDashed")}</div>)
                },
                {
                  name: localize("settings.strokeDotted"),
                  value: 'dotted',
                  label: (<div style={{ fontSize: 12 }}><IconDatawindLineDot style={{ marginRight: 6 }} />{localize("settings.strokeDotted")}</div>)
                }
              ],
              prefix: <IconLinetype style={{ fontSize: 16 }} />,
            },
          ]
        },
        {
          type: 'form-item',
          label: localize("settings.shadow"),
          children: [
            {
              type: 'number-input',
              size: 3,
              valuePath: 'properties.custom.shadowX',
              get tooltip() {
                return localize("settings.XOffset")
              },
              prefix: (<div>X</div>),
            },
            {
              type: 'number-input',
              size: 3,
              valuePath: 'properties.custom.shadowY',
              get tooltip() {
                return localize("settings.YOffset")
              },
              prefix: (<div>Y</div>),
            },
            {
              type: 'number-input',
              size: 3,
              valuePath: 'properties.custom.shadowB',
              get tooltip() {
                return localize("settings.blurRadius")
              },
              prefix: (<div>B</div>),
            },
            {
              type: 'input-color-picker',
              size: 3,
              valuePath: 'properties.custom.shadowColor',
              get tooltip() {
                return `阴影颜色`
              },
              prefix: <IconDashboardYanse style={{ fontSize: 16 }} />,
            },
          ]
        },

      ]
    },
    {
      type: 'ElementBasicPanel',
    },
  ]
})
export default Settings
