import { useAjax } from "@/Hook/useAjax";
import { getFreeChapterListApi } from "@/pages/weComTask/API/bookLink";
import { App, Button, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
import React from "react";
import SelectBook from "../../selectBook";

interface Props extends BOOKLINK.BookLinkChildProps {
    yueWenCreateLinkDTO: { [x: string]: any }
    platform: string,
    mpAccountIds: number[]
}
/**
 * 作品链接
 * @returns 
 */
const BookPromoLinkCreateDTO: React.FC<Props> = ({ restField, name, yueWenCreateLinkDTO, platform, mpAccountIds }) => {

    /**********************************/
    const { message } = App.useApp()
    const getFreeChapterList = useAjax((params) => getFreeChapterListApi(params))
    /**********************************/

    const getChapterList = () => {
        if (platform && mpAccountIds?.length && yueWenCreateLinkDTO?.bookPromoLinkCreateDTO?.bookId) {
            getFreeChapterList.run({ platform, mpAccountIds, bookId: yueWenCreateLinkDTO.bookPromoLinkCreateDTO.bookId })
        } else {
            message.error('请先选择书城、公众号')
        }
    }

    return <>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'bookId']}
            rules={[{ required: true, message: '请输入作品(书籍)ID!' }]}
            label={<strong>作品(书籍)ID</strong>}
        >
            <SelectBook 
                platformKey={platform}
                searchChapterDisabled={!yueWenCreateLinkDTO?.bookPromoLinkCreateDTO?.bookId}
                searchChapterLoading={getFreeChapterList.loading}
                hanldeSearchChapter={getChapterList}

            />
        </Form.Item>

        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'chapterId']}
            label={<strong>章节</strong>}
            rules={[{ required: true, message: '请选择章节!' }]}
        >
            <Select
                showSearch
                placeholder="请选择章节"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                allowClear
                options={getFreeChapterList?.data?.data?.chapterList?.map(item => ({ value: item.chapterId, label: item.chapterName }))}
            />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'forceStyle']}
            label={<strong>强关设置</strong>}
            rules={[{ required: true, message: '请选择强关设置!' }]}
        >
            <Radio.Group
                optionType='button'
                buttonStyle="solid"
                options={[
                    { value: 1, label: '不设置强关' },
                    { value: 2, label: '主动关注' },
                    { value: 3, label: '强制关注' },
                ]}
            />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'forceChapter']}
            label={<strong>强关章节序号</strong>}
            rules={[{ required: true, message: '请输入强关章节序号!' }]}
        >
            <InputNumber placeholder="请输入强关章节序号" style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'isOpenBottom']}
            label={<strong>是否添加底部关注引导</strong>}
            valuePropName="checked"
        >
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'cost']}
            label={<strong>推广成本</strong>}
        >
            <InputNumber placeholder="请输入推广成本" style={{ width: '100%' }} />
        </Form.Item>
    </>
}

export default React.memo(BookPromoLinkCreateDTO);