import React, { useState, useContext, useMemo, useEffect } from 'react'
import styles from './index.less'
import { Input, Form } from 'antd'
import { GlobalStore } from '../index'

const themes = [
  { name: '供水主题背景' },
  { name: '排水主题背景' },
  { name: '农饮水主题背景' },
]

const Right = () => {

  const { shema, setShema } = useContext(GlobalStore)
  const { active } = shema
  const [form] = Form.useForm()

  const name = useMemo(() => {
    let name = ''
    shema?.work.forEach(v => {
      if (v.active) {
        name = v.name
      }
    })
    return name
  }, [shema])

  const groupActive = useMemo(() => {
    let Active = false
    shema?.work.forEach(v => {
      if (v.active) {
        Active = true
      }
    })
    return Active
  }, [shema])

  const card = useMemo(() => {
    let card = {}
    shema?.work.forEach(v => {
      v.children.forEach(s => {
        if (s.active) {
          card = { ...s }
        }
      })
    })
    return card
  }, [shema])

  useEffect(() => {
    form?.setFieldsValue?.({ ...card })
  }, [card])

  const changeThemes = (v) => {
    setShema({ ...shema, theme: v.name })
  }

  const groupChange = (e) => {
    e.persist()
    let array = []
    shema?.work.forEach(v => {
      array.push({ ...v, name: v.active ? e.target.value : v.name })
    })
    setShema({ ...shema, work: array })
  }

  const cardSetting = (e, attr) => {
    e.persist()
    let array = []
    shema?.work.forEach(v => {
      array.push({ ...v, children: v.children.map(v => ({ ...v, [attr]: v.active ? e.target.value : v[attr] })) })
    })
    setShema({ ...shema, work: array })
  }

  return (
    <div className={styles.right}>
      <div className={styles.header}>{active ? '页面配置' : '组件配置'}</div>
      <div className={styles.pageSetting} style={{ display: active ? 'block' : 'none' }}>
        <div className={styles.group}>
          <div className={styles['g-title']}>主题色设置</div>
          <div className={styles['g-content']}>
            {
              themes.map(v => {
                return (
                  <div
                    className={styles['c-center']}
                    onClick={() => changeThemes(v)}
                    key={v.name}
                  >
                    <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
                    <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>
      <div className={styles.comSetting} style={{ display: !active ? 'block' : 'none' }}>
        {
          groupActive ? (
            <div className={styles.group}>
              <div className={styles['g-title']}>分组设置</div>
              <div className={styles['g-content']}>
                <div className={styles['c-item']}>
                  <div>
                    分组名称：
                  </div>
                  <div>
                    <Input value={name} onChange={groupChange} />
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div style={{ padding: '10px' }}>
              <Form form={form} layout='vertical'>
                <Form.Item label="卡片名称" name="name">
                  <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
                </Form.Item>
                <Form.Item label="卡片图标" name="icon">
                  <Input value={card.icon} onChange={(e) => cardSetting(e, 'icon')} />
                </Form.Item>
                <Form.Item label="功能跳转" name="url">
                  <Input.TextArea value={card.url} onChange={(e) => cardSetting(e, 'url')} />
                </Form.Item>
                <Form.Item label="卡片参数" name="param">
                  <Input value={card.param} onChange={(e) => cardSetting(e, 'param')} />
                </Form.Item>
              </Form>
            </div>
          )
        }
      </div>
    </div>
  )

}

export default Right