'use client';

import {memo, useEffect, useState} from 'react';
import {Form, Select, Radio, Slider, InputNumber, Image} from "antd";
import {createStyles} from "antd-style";

const ysOptions = [
  {id: '1', name: '男声', icon: '/images/per.png/'},
  {id: '2', name: '男声', icon: '/images/per.png/'},
  {id: '3', name: '男声', icon: '/images/per.png/'},
  {id: '4', name: '男声', icon: '/images/per.png/'},
  {id: '5', name: '男声', icon: '/images/per.png/'},
  {id: '6', name: '男声', icon: '/images/per.png/'},
  {id: '7', name: '男声', icon: '/images/per.png/'},
]

const useStyles = createStyles(({ css, token }) => ({
  cricle: css`
    width: 8px;
    height: 8px;
    border-radius: 8px;
    display: inline-block;
    margin-right: 15px;
    background-color: #4F4F4F;
  `,
  onlyDiv: css`
    padding: 15px 40px;
  `,
  leftText: css`
    width: 200px;
    font-size: 18px;
    color: #333;
    display: inline-block
  `,
  leftDir: css`
    color: #999999;
    font-size: 16px;
    display: inline-block;
    margin-left: 5px;
  `,
  rightText: css`
    width: calc(100% - 215px);
    text-align: right;
    color: #333333;
    font-size: 16px;
    display: inline-block;
    margin-right: 15px;
  `,
  childrenLeftText: css`
    margin-left: 50px;
  `,
  childrenRightText: css`
    width: calc(100% - 265px);
  `,
  childrenlangText: css`
    margin-left: 50px;
    width: calc(100% - 65px);
    text-align: left;
  `,
  circleImg: css`
    width: 62px;
    height: 62px;
    line-height: 62px;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
    position: relative;
    border-radius: 62px;
    background-color: #B8C8FF;
    border: 1px solid #B8C8FF;
  `,
  optName: css`
    display: inline-block;
    position: absolute;
    line-height: normal;
    font-size: 13px;
    background: #C1CFFF;
    border-radius: 18px;
    color: #3A61CB;
    bottom: -5px;
    left: 10px;
    padding: 2px 6px;
  `,
  circleSeleImg: css`
    border: 1px solid #0044FF;
  `,
  optSeleName: css`
    background: #0044FF;
    color: #fff;
  `,
  radioRigh: css`
    margin-right: 24px
  `,
  topTitle: css`
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  `,
}))

const szrOptions = [
  {
    value: '1',
    label: 'Jack',
  },
  {
    value: '2',
    label: 'Lucy',
  },
  {
    value: '3',
    label: 'yiminghe',
  },
]

const yyOptions = [
  {
    label: '普通话',
    value: 'pth',
  },
  {
    label: '英文',
    value: 'yw',
  },
  {
    label: '法语',
    value: 'fy',
  },
]

const Page = memo(() => {
  const [form] = Form.useForm()
  const { styles, cx } = useStyles()
  const [optValue, setOptValue] = useState("")

  useEffect(() => {
    form.setFieldsValue({
      szr: '1',
      yy: 'pth',
      ys: '1.0',
      ysnum: '1.0',
      yd: '1.0',
      ydnum: '1.0',
      yl: '1.0',
      ylnum: '1.0',
    })
  })

  const onChangeYs = (val) => {
    form.setFieldsValue({
      ysnum: val
    })
  }

  const onChangeYd = (val) => {
    form.setFieldsValue({
      ydnum: val
    })
  }

  const onChangeYl = (val) => {
    form.setFieldsValue({
      ylnum: val
    })
  }

  const onClickYin = (e) => {
    setOptValue(e.id)
  }

  return (
    <>
      <Form form={form} style={{ marginBottom: '30px' }}>
        <div className={cx(styles.onlyDiv, styles.topTitle)}>
          <div className={cx(styles.leftText)}>数字人形象</div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>选择数字人</div>
          <div className={cx(styles.rightText)}>
            <Form.Item label="" name="szr">
              <Select
                style={{ width: 120, textAlign: 'left' }}
                options={szrOptions}
              />
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>数字人形象</div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.rightText, styles.childrenlangText)} style={{ textAlgin: 'center' }}>
            <Image alt={'数字人形象'} src="/images/szrxx.png" preview={false} />
          </div>
        </div>
        <div className={cx(styles.onlyDiv, styles.topTitle)}>
          <div className={cx(styles.leftText)}>声音设置</div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>语言</div>
          <div className={cx(styles.rightText)}>
            <Form.Item label="" name="yy">
              <Select
                style={{ width: 120, textAlign: 'left' }}
                options={yyOptions}
              />
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>风格</div>
          <div className={cx(styles.rightText)}>
            <Form.Item label="" name="fg">
              <Radio.Group disabled buttonStyle="solid">
                <Radio.Button className={styles.radioRigh} value="mr">默认</Radio.Button>
                <Radio.Button className={styles.radioRigh} value="xw">新闻</Radio.Button>
                <Radio.Button className={styles.radioRigh} value="xx">小说</Radio.Button>
                <Radio.Button className={styles.radioRigh} value="zs">知识</Radio.Button>
              </Radio.Group>
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>语速</div>
          <div className={cx(styles.rightText)}>
            <Form.Item style={{ display: 'inline-block'}} label="" name="ys">
              <Slider
                style={{ width: "120px" }}
                min={0}
                max={2}
                onChange={(e) => onChangeYs(e)}
                step={0.1}
              />
            </Form.Item>
            <Form.Item style={{ display: 'inline-block'}} label="" name="ysnum">
              <InputNumber
                min={0}
                max={2}
                style={{
                  margin: '0 16px',
                }}
                step={0.1}
              />
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>语调</div>
          <div className={cx(styles.rightText)}>
            <Form.Item style={{ display: 'inline-block'}} label="" name="yd">
              <Slider
                style={{ width: "120px" }}
                min={0}
                max={2}
                onChange={(e) => onChangeYd(e)}
                step={0.1}
              />
            </Form.Item>
            <Form.Item style={{ display: 'inline-block'}} label="" name="ydnum">
              <InputNumber
                min={0}
                max={2}
                style={{
                  margin: '0 16px',
                }}
                step={0.1}
              />
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>音量</div>
          <div className={cx(styles.rightText)}>
            <Form.Item style={{ display: 'inline-block'}} label="" name="yl">
              <Slider
                style={{ width: "120px" }}
                min={0}
                max={2}
                onChange={(e) => onChangeYl(e)}
                step={0.1}
              />
            </Form.Item>
            <Form.Item style={{ display: 'inline-block'}} label="" name="ylnum">
              <InputNumber
                min={0}
                max={2}
                style={{
                  margin: '0 16px',
                }}
                step={0.1}
              />
            </Form.Item>
          </div>
        </div>
        <div className={cx(styles.onlyDiv)}>
          <div className={cx(styles.leftText)}>音色</div>
          <div className={cx(styles.rightText)}>
            {
              ysOptions.map(e => {
                return (
                  <div className={cx(styles.circleImg, optValue==e.id&&styles.circleSeleImg)} onClick={() => onClickYin(e)}>
                    <Image alt={e.name} src={e.icon} preview={false} />
                    <span className={cx(styles.optName, optValue==e.id&&styles.optSeleName)}>{e.name}</span>
                  </div>
                )
              })
            }
          </div>
        </div>
      </Form>
    </>
  );
});

Page.displayName = 'SzrSetting';

export default Page;
