import React, { useEffect } from 'react';
import '../../tencentAdPutIn/index.less'
import { Button, Card, Form, message, Modal, Radio, Space } from 'antd';
import { useAjax } from '@/Hook/useAjax';
import { updateComponentSharingApi } from '@/services/adqV3/global';
import SelectShareAccount from './selectShareAccount';

interface Props {
    adAccountData: any
    visible?: boolean,
    onClose?: () => void,
    onChange?: () => void,
    data?: any
}

/**
 * 共享组件
 * @param param0 
 * @returns 
 */
const ShareComponent: React.FC<Props> = ({ visible, onClose, onChange, data, adAccountData }) => {

    /****************************************/
    const [form] = Form.useForm();
    const sharedAccountType = Form.useWatch('sharedAccountType', form)

    const updateComponentSharing = useAjax((params) => updateComponentSharingApi(params))
    /****************************************/

    useEffect(() => {
        form.setFieldsValue({ sharedAccountType: data?.componentSharingType || 'ORGANIZATION' })
    }, [data])

    const handleOk = (values: any) => {
        console.log(values, data)
        updateComponentSharing.run({
            ...values,
            componentId: data?.componentId,
            adAccountId: data?.accountId
        }).then((res) => {
            if (res) {
                message.success('修改成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={<strong style={{ fontSize: 20 }}>组件共享</strong>}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={700}
        className={`modalResetCss`}
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
    >
        <Form
            form={form}
            name="shareComponents"
            labelAlign='left'
            labelCol={{ span: 4 }}
            colon={false}
            style={{ backgroundColor: '#f1f4fc', maxHeight: 650, overflow: 'hidden', overflowY: 'auto', padding: 10, borderRadius: '0 0 8px 8px' }}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
            initialValues={{
                // componentsGroup: [{ componentSubType: 'IMAGE_16X9' }, { componentSubType: 'IMAGE_LIST_1X1_3' }]
            }}
        >
            <Card title={<strong>共享设置</strong>} className="cardResetCss">
                <Form.Item name="sharedAccountType" label={<strong>共享模式</strong>} rules={[{ required: true, message: '请选择投放模式!' }]}>
                    <Radio.Group buttonStyle="solid">
                        <Radio.Button value={'ORGANIZATION'}>全部共享</Radio.Button>
                        <Radio.Button value={'ADVERTISER'}>部分共享</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                {sharedAccountType === 'ADVERTISER' && <Form.Item name="sharingAccountIds" label={<strong>共享账号</strong>} rules={[{ required: true, message: '请选择共享账号!' }]}>
                    <SelectShareAccount accountId={adAccountData?.adAccountId} />
                </Form.Item>}
            </Card>
            <Form.Item className="submit_pull">
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" className="modalResetCss" loading={updateComponentSharing.loading}>
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
};

export default ShareComponent;