import { Steps, Card, Result, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from "./index.less";
import { PageContainer } from '@ant-design/pro-layout';
import StoreConfig from './components/StoreConfig';
import DeviceConfig from './components/DeviceConfig';
import FoodMenuConfig from './components/FoodMenuConfig';
import GoodsConfig from './components/GoodsConfig';
import BomConfig from './components/BomConfig';
import MaterialConfig from './components/MaterialConfig';
import ConfirmConfig from './components/ConfirmConfig';
import StepsButton from "./components/StepsButton";

const { Step } = Steps;

const QuickStart = () => {
    const [isSuccess, setIsSuccess] = useState(false);
    const [current, setCurrent] = useState(0);
    const [quickStartObj, setQuickStartObj] = useState({
        storeConfig: {},
        deviceConfig: {},
        foodMenuConfig: [],
    });

    const onSelectedChange = (configType, payload) => {
        const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
        switch (configType) {
            case 'storeConfig':
                tempQuick.storeConfig = payload;
                break;
            case 'deviceConfig':
                tempQuick.deviceConfig = payload;
                break;
            case 'foodMenuConfig':
                tempQuick.foodMenuConfig = payload;
                break;
        }
        setQuickStartObj(tempQuick);
    }

    //将商品添加到菜谱
    const onAddGoodsToFoodMenu = (foodMenuId, goods, isAdd = true) => {
        const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
        const findFoodMenu = tempQuick.foodMenuConfig.find(item => item.id === foodMenuId);
        if (isAdd && findFoodMenu) {
            findFoodMenu.goodsConfig = goods;
        } else {
            const findIndex = findFoodMenu.goodsConfig.findIndex(item => item.id === goods.id);
            if (findIndex > -1) {
                findFoodMenu.goodsConfig.splice(findIndex, 1);
            }
        }
        setQuickStartObj(tempQuick);
    }

    //配方关联商品
    const onBomRelationGoods = (goodsId, bom, isAdd = true) => {
        const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
        tempQuick.foodMenuConfig.forEach(findFoodMenu => {
            const goodsInfo = findFoodMenu.goodsConfig.find(item => item.id === goodsId);
            if (goodsInfo) {
                if (isAdd) {
                    goodsInfo.bomConfig = bom;
                } else {
                    const findIndex = goodsInfo.bomConfig.findIndex(item => item.id === bom.id);
                    if (findIndex > -1) {
                        goodsInfo.bomConfig.splice(findIndex, 1);
                    }
                }
                setQuickStartObj(tempQuick);
            }
        })
    }

    //物料关联配方
    const onMaterialRelationBom = (bomId, material, isAdd = true) => {
        const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
        tempQuick.foodMenuConfig.forEach(findFoodMenu => {
            findFoodMenu.goodsConfig.forEach(findGoods => {
                const findBom = findGoods.bomConfig.find(item => item.id === bomId);
                if (findBom) {
                    if (isAdd) {
                        findBom.materialConfig = material;
                    } else {
                        const findMaterialIndex = findBom.materialConfig.findIndex(item => item.id === material.id);
                        if (findMaterialIndex > -1) {
                            findBom.materialConfig.splice(findMaterialIndex, 1);
                        }
                    }
                    setQuickStartObj(tempQuick);
                }
            });
        });
    }

    /**
     * 更新物料信息
     * @param {*} bomId 
     * @param {*} material 
     */
    const onUpdateMaterial = (bomId, material) => {
        const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
        tempQuick.foodMenuConfig.forEach(findFoodMenu => {
            findFoodMenu.goodsConfig.forEach(findGoods => {
                const findBom = findGoods.bomConfig.find(item => item.id === bomId);
                if (findBom) {
                    const findMaterial = findBom.materialConfig.find(materialItem => materialItem.id === material.id);
                    if (findMaterial) {
                        findMaterial.BomQty = Number.parseFloat(material.BomQty) || 0;
                        setQuickStartObj(tempQuick);
                    }
                }
            });
        });
    }

    //下一步
    const next = () => {
        setCurrent(current + 1);
    };

    //上一步
    const prev = () => {
        setCurrent(current - 1);
    };

    const stepsText = ['门店配置', '设备配置', '菜谱配置', '商品配置', '配方配置', '物料配置', '确认配置'];

    const stepsContent = [
        <StoreConfig storeConfig={quickStartObj.storeConfig} current={current} steps={stepsText} next={next} onSelectedChange={onSelectedChange}></StoreConfig>,
        <DeviceConfig storeConfig={quickStartObj.storeConfig} deviceConfig={quickStartObj.deviceConfig} current={current} steps={stepsText} prev={prev} next={next} onSelectedChange={onSelectedChange} ></DeviceConfig>,
        <FoodMenuConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} prev={prev} next={next} onSelectedChange={onSelectedChange}></FoodMenuConfig>,
        <GoodsConfig deviceConfig={quickStartObj.deviceConfig} foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} onAddGoodsToFoodMenu={onAddGoodsToFoodMenu} prev={prev} next={next} ></GoodsConfig>,
        <BomConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} prev={prev} next={next} onBomRelationGoods={onBomRelationGoods}></BomConfig>,
        <MaterialConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} onMaterialRelationBom={onMaterialRelationBom} onUpdateMaterial={onUpdateMaterial} prev={prev} next={next}></MaterialConfig>,
        <ConfirmConfig {...quickStartObj} current={current} steps={stepsText} prev={prev} ></ConfirmConfig>
    ];

    useEffect(() => {
        console.log('对象更新', quickStartObj)
    }, [quickStartObj]);

    return <PageContainer>
        <div className={styles.steps_navbar}>
            <Card>
                <Steps current={current}>
                    {stepsText.map((item) => (
                        <Step key={item} title={item} />
                    ))}
                </Steps>
            </Card>
        </div>

        {
            isSuccess ?
                <Card>
                    <Result
                        status="success"
                        title="成功配置所有信息！"
                        subTitle="欢迎再次使用！"
                        extra={[
                            <Button type="primary" key="console" onClick={() => {
                                setQuickStartObj({
                                    storeConfig: {},
                                    deviceConfig: {},
                                    foodMenuConfig: [],
                                })
                                setCurrent(0);
                                setIsSuccess(false);
                            }}>
                                快速开始
                            </Button>
                        ]}
                    />
                </Card>
                :
                <>
                    <Card>
                        <div className={styles.steps_content}>{stepsContent[current]}</div>
                    </Card>

                    <div className={styles.steps_navbar_bottom}>
                        <Card>
                            <StepsButton  {...quickStartObj} current={current} steps={stepsText} prev={prev} next={next} success={() => setIsSuccess(true)}></StepsButton>
                        </Card>
                    </div>
                </>
        }
    </PageContainer>

}

export default QuickStart;