import React from "react";
import { Modal, Row, Col, Select, Input, Tooltip, Checkbox } from "antd";
import LocaleUtils from "@/utils/LocaleUtils";
import intl from "react-intl-universal";
import { ExclamationCircleOutlined } from "@ant-design/icons";
const { Option } = Select;
const { confirm } = Modal;
const { ipcRenderer, remote } = window.require("electron");
/**
 * 系统配置
 */
class SystemConfig extends React.Component {
    needRestart = false;
    state = {
        visible: false,
        config: { lang: "", splitSign: "", autoFormatJson: true },
    };
    componentDidMount() {
        // 重置连接事件
        ipcRenderer.on("system-config", (event, arg) => {
            this.showModal();
        });
    }

    showModal = () => {
        this.setState({
            visible: true,
            config: LocaleUtils.readSystemConfig(),
        });
    };

    handleOk = (e) => {
        this.setState({
            visible: false,
        });
        LocaleUtils.saveSystemConfig(this.state.config);
        if (this.needRestart) {
            this.needRestart = false;
            confirm({
                title: intl.get("common.notice"),
                icon: <ExclamationCircleOutlined />,
                content: intl.get("SystemConfig.needRestart"),
                onOk() {
                    remote.app.quit();
                },
                onCancel() {},
            });
        }
    };

    handleCancel = (e) => {
        this.needRestart = false;
        this.setState({
            visible: false,
        });
    };
    /**
     *修改语言
     *
     * @param {*} val
     * @memberof SystemConfig
     */
    handleLangChange(val) {
        this.setState({
            config: { ...this.state.config, lang: val },
        });
        this.needRestart = true;
    }
    /**
     *修改分隔符
     *
     * @memberof SystemConfig
     */
    handleSplitSignChange = (event) => {
        this.setState({
            config: { ...this.state.config, splitSign: event.target.value },
        });
        this.needRestart = true;
    };
    /**
     *修改自动格式化json
     *
     * @memberof SystemConfig
     */
    handleAutoFormatJsonChange = (event) => {
        this.setState({
            config: {
                ...this.state.config,
                autoFormatJson: event.target.checked,
            },
        });
    };

    render() {
        let options = LocaleUtils.LOCALES.map((l) => (
            <Option key={l.value} value={l.value}>
                {l.label}
            </Option>
        ));
        return (
            <div>
                <Modal
                    title={intl.get("SystemConfig.title")}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Row gutter={[16, 16]}>
                        <Col span={6}>{intl.get("SystemConfig.lang")}</Col>
                        <Col span={18}>
                            <Select
                                key={this.state.config.lang}
                                defaultValue={this.state.config.lang}
                                style={{ width: 300 }}
                                onChange={this.handleLangChange.bind(this)}
                            >
                                {options}
                            </Select>
                        </Col>
                        <Col span={6}>
                            {intl.get("SystemConfig.tree.split")}
                        </Col>
                        <Col span={18}>
                            <Tooltip title="When you set this value, the keys will be displayed in the form of a directory.">
                                <Input
                                    style={{ width: 300 }}
                                    placeholder="Input Delimiter"
                                    defaultValue={this.state.config.splitSign}
                                    value={this.state.config.splitSign}
                                    onChange={this.handleSplitSignChange}
                                />
                            </Tooltip>
                        </Col>
                        <Col span={6}>
                            {intl.get("SystemConfig.auto.format.json")}
                        </Col>
                        <Col span={18}>
                            <Checkbox
                                onChange={this.handleAutoFormatJsonChange}
                                checked={this.state.config.autoFormatJson}
                            ></Checkbox>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
}
export default SystemConfig;