import React, { useEffect, useRef, useState } from 'react';
import { Alert, Flex, Input, Tag, Form, Switch, theme } from 'antd';
import Styles from './web.pc.module.less';
import { PlusOutlined } from '@ant-design/icons';
const tagInputStyle = {
    width: 64,
    height: 22,
    marginInlineEnd: 8,
    verticalAlign: 'top',
};
export default function Offline(props) {
    const { config, update, t } = props;
    const { options = [], allowUser = false, tips } = config;
    const { token } = theme.useToken();
    const tagPlusStyle = {
        height: 22,
        background: token.colorBgContainer,
        borderStyle: 'dashed',
    };
    const [inputVisible, setInputVisible] = useState(false);
    const [option, setOption] = useState('');
    const inputRef = useRef(null);
    useEffect(() => {
        if (inputVisible) {
            inputRef.current?.focus();
        }
    }, [inputVisible]);
    const handleOptionCreated = () => {
        if (option) {
            options.push(option);
            update({
                ...config,
                options,
            });
        }
        setOption('');
        setInputVisible(false);
    };
    return (<div className={Styles.container}>
            <Alert type='info' message={t('tips')}/>
            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ minWidth: 600, marginTop: 22 }}>
                <Form.Item label={t('tips2')}>
                    <Input.TextArea rows={4} value={tips} placeholder={t('tipsHolder')} onChange={({ currentTarget }) => {
            update({
                ...config,
                tips: currentTarget.value,
            });
        }}/>
                </Form.Item>
                <Form.Item label={t('options')}>
                    <Flex gap="4px 0" wrap="wrap">
                        {options.map((option, idx) => <Tag bordered={false} closable key={idx} onClose={() => {
                options.splice(idx, 1);
                update({
                    ...config,
                    options,
                });
            }}>
                                    {option}
                                </Tag>)}
                        {inputVisible ? (<Input ref={inputRef} type="text" size="small" style={tagInputStyle} value={option} onChange={({ currentTarget }) => setOption(currentTarget.value)} onBlur={handleOptionCreated} onPressEnter={handleOptionCreated}/>) : (<Tag style={tagPlusStyle} icon={<PlusOutlined />} onClick={() => setInputVisible(true)}>
                                {t('newOption')}
                            </Tag>)}
                    </Flex>
                </Form.Item>
                <Form.Item label={t('allowUser')}>
                    <Switch value={allowUser} onChange={(v) => {
            update({
                ...config,
                allowUser: v,
            });
        }}/>
                </Form.Item>
            </Form>
        </div>);
}