import React, { useState } from "react";
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Form, Select, Result, Button } from 'antd';
import styles from "./index.less";
import CouponDelivery from "./components/CouponDelivery";
import FullDecrement from "./components/FullDecrement";
import SpecialOffer from "./components/SpecialOffer";
import FreeCouponMoney from "./components/FreeCouponMoney";
import FreeGoodsMoney from "./components/FreeGoodsMoney";
import LadderExchange from "./components/LadderExchange";
import PriceIncrease from "./components/PriceIncrease";

const { Option } = Select;


/**
 * 活动快速开始
 * @returns 
 */
const ActivityStart = () => {

    const activityForm = Form.useForm();
    const [currentActivityType, setCurrentActivityType] = useState(1);
    const onSuccessCreate = () => {
        setCurrentActivityType(0);
    }

    const SuccessResult = () => {
        return <Result
            status="success"
            title="创建成功！"
            subTitle="活动创建成功！"
            extra={[
                <Button type="primary" key="console" onClick={() => setCurrentActivityType(1)}>
                    再次创建
                </Button>,
            ]}
        />
    }

    return <PageContainer>
        <Card className={styles.activity_start_container}>
            {
                currentActivityType > 0 && <div className={styles.head_row}>
                    <div className={styles.head_row_prev}>
                        活动类型：
                    </div>
                    <Select
                        showSearch
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        placeholder="请选择活动类型"
                        style={{ width: '600px' }}
                        onChange={(value) => {
                            setCurrentActivityType(value);
                        }}
                        value={currentActivityType}
                    >
                        <Option key={1} value={1}>
                            {'送券'}
                        </Option>
                        <Option key={2} value={2}>
                            {'买满减现'}
                        </Option>
                        <Option key={3} value={3}>
                            {'特价商品'}
                        </Option>
                        <Option key={4} value={4}>
                            {'买满赠送(优惠券)'}
                        </Option>
                        <Option key={5} value={5}>
                            {'买满赠送(商品)'}
                        </Option>
                        <Option key={6} value={6}>
                            {'累计消费换购(阶梯)'}
                        </Option>
                        <Option key={7} value={7}>
                            {'累计消费换购(循环)'}
                        </Option >
                        <Option key={8} value={8}>
                            {'加价换购'}
                        </Option>
                    </Select>
                </div>
            }
            {currentActivityType === 1 && <CouponDelivery onSuccessCreate={onSuccessCreate}></CouponDelivery>}
            {currentActivityType === 2 && <FullDecrement onSuccessCreate={onSuccessCreate}></FullDecrement>}
            {currentActivityType === 3 && <SpecialOffer onSuccessCreate={onSuccessCreate}></SpecialOffer>}
            {currentActivityType === 4 && <FreeCouponMoney onSuccessCreate={onSuccessCreate}></FreeCouponMoney>}
            {currentActivityType === 5 && <FreeGoodsMoney onSuccessCreate={onSuccessCreate}></FreeGoodsMoney>}
            {currentActivityType === 6 && <LadderExchange onSuccessCreate={onSuccessCreate} currentActivityType={currentActivityType}></LadderExchange>}
            {currentActivityType === 7 && <LadderExchange onSuccessCreate={onSuccessCreate} currentActivityType={currentActivityType}></LadderExchange>}
            {currentActivityType === 8 && <PriceIncrease onSuccessCreate={onSuccessCreate}></PriceIncrease>}
            {currentActivityType === 0 && <SuccessResult></SuccessResult>}
        </Card>
    </PageContainer >
}

export default ActivityStart;