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

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

// 填充色
const backgroundColorConfig = () => ({
  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 }} />,
    },
  ]
})

// 边框样式
const strokeConfig = () => ({
  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 }} />,
    },
  ]
})

// 旋转
const rotateConfig = () => ({
  type: 'form-item',
  label: localize("settings.rotate"),
  children: [
    {
      type: 'number-input',
      size: 3,
      unit: '°',
      valuePath: 'properties.custom.rotateAngle',
      prefix: <IconRotateRight style={{ fontSize: 16 }} />,
    }
  ]
})

// 圆角
const radiusConfig = () => ({
  type: 'form-item',
  label: localize("settings.cornerRadius"),
  children: [
    {
      type: 'select',
      size: 3,
      valuePath: 'properties.custom.borderRadius',
      range: [0, 10],
      prefix: <IconDashboardYuanjiao style={{ fontSize: 16 }} />,
    }
  ]
})

const shadowConfig = () => ({
  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 localize("settings.shadowColor")
      },
      prefix: <IconDashboardYanse style={{ fontSize: 16 }} />,
    },
  ]
})



export const getSettingsConfig = (settings: String[]) => {
  const settingsConfig = {
    backgroundColor: backgroundColorConfig(),
    stroke: strokeConfig(),
    rotate: rotateConfig(),
    radius: radiusConfig(),
    shadow: shadowConfig(),
  }

  return Object.entries(settingsConfig).map(([key, value]) => {
    if (settings.includes(key)) {
      return value
    }
    return null
  }).filter(Boolean)

}