import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
import { useOptionsStore } from '@/store/options';
import { useSoftStore } from '@/store/software';
import { Button, Card, Form, Input } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { message } from 'antd/lib';
import React, { useEffect } from 'react';

const SimpleOptions: React.FC = () => {

  const { setTopSpinning, setTopSpinTip } = useSoftStore();
  const [messageApi, messageHolder] = message.useMessage();
  const { laitoolOptions, setLaitoolOptions } = useOptionsStore();
  const [form] = Form.useForm();


  useEffect(() => {
    setTopSpinning(true);
    setTopSpinTip("加载信息中");
    // 这边加载所有的配音数据
    GetOptions("software").then((res) => {
      setLaitoolOptions(res);
      form.setFieldsValue({
        LaitoolHomePage: getOptionsStringValue(res, 'LaitoolHomePage', ""),
        LaitoolUpdateContent: getOptionsStringValue(res, 'LaitoolUpdateContent', ""),
        LaitoolNotice: getOptionsStringValue(res, 'LaitoolNotice', ""),
        LaitoolVersion: getOptionsStringValue(res, 'LaitoolVersion', ""),
      });
    }
    ).catch((err: any) => {
      messageApi.error(err.message);
    }).finally(() => {
      setTopSpinning(false);
    });

  }, []);


  async function onFinish(values: any): Promise<void> {
    setTopSpinning(true);
    setTopSpinTip("正在保存通用设置");
    try {
      // 这边保存所有的配音数据
      await SaveOptions(values);
      // 判断Option中的key是不是在属性上
      for (let key in values) {
        setLaitoolOptions(laitoolOptions.map((item: OptionModel.Option) => {
          if (item.key === key) {
            item.value = values[key]
          }
          return item
        }));
      }
      messageApi.success('设置成功');
    } catch (error: any) {
      messageApi.error(error.message);
    } finally {
      setTopSpinning(false);
    }
  }

  return (
    <div>
      <Form name="trigger" form={form} layout="vertical" autoComplete="off" onFinish={onFinish}>
        <Form.Item
          label="软件版本号"
          name="LaitoolVersion"
        >
          <Input placeholder='请输入版本号' />
        </Form.Item>
        <Form.Item
          label="首页内容"
          name="LaitoolHomePage"
        >
          <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe，可以内嵌所有的网页" />
        </Form.Item>
        <Form.Item
          label="更新内容"
          name="LaitoolUpdateContent"
        >
          <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
        </Form.Item>
        <Form.Item
          label="通知"
          name="LaitoolNotice"
        >
          <TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" variant="filled" htmlType="submit">设置通用设置</Button>
        </Form.Item>
      </Form>
      {messageHolder}
    </div>
  );
};

export default SimpleOptions;