import React from "react";
import { Suspense, useState } from "react";
import { GridContent, PageLoading } from "@ant-design/pro-layout";
import IntroduceRow from './components/IntroduceRow';
import RevenueCard from './components/RevenueCard';
import CustomerCard from './components/CustomerCard';
import ProportionSales from './components/ProportionSales';

import { useRequest } from "umi";
import { fakeChartData } from './sevice';

import type { AnalysisData } from "./data";
import type { TimeType } from './components/RevenueCard'
import type { RangePickerProps } from "antd/es/date-picker/generatePicker";
import { getTimeDistance } from "@/utils/utils";

import styles from './analysis.less'
import type { RadioChangeEvent} from "antd";
import { Col, Row } from "antd";


type RangePickerValue = RangePickerProps<moment.Moment>['value']

type SalesType = 'business' | 'customer' | 'yearwest';
type analysisProps = { loading: boolean, data: AnalysisData }

const Analysis: React.FC<analysisProps> = () => {

    const { loading, data } = useRequest(fakeChartData);

    const [rangePickerValue, setRangePickerValue] = useState<RangePickerValue>(getTimeDistance('year'),);
    const [activeButton, setActiveButton] = useState<string>('year',);
    const [salesType , setSalesType] = useState<SalesType>('business',);

    const selectDate = (type: TimeType) => {
        setRangePickerValue(getTimeDistance(type))
    }
    const handleRangePickerChange = (value: RangePickerValue) => {
        setRangePickerValue(value)
    }
    const isActive = (type: TimeType) => {
        if (!rangePickerValue) {
            return '';
        }
        const value = getTimeDistance(type);
        if (!value) {
            return '';
        }
        if (!rangePickerValue[0] || !rangePickerValue[1]) {
            return '';
        }
        if (
            rangePickerValue[0].isSame(value[0] as moment.Moment, 'day') &&
            rangePickerValue[1].isSame(value[1] as moment.Moment, 'day')
        ) {
            return styles.currentDate;
        }
        return '';
    };
    let salesPieData;
    if (salesType === 'business') {
      salesPieData = data?.salesTypeData;
    } else {
      salesPieData = salesType === 'customer' ? data?.salesTypeDataOnline : data?.salesTypeDataOffline;
    }
    const handleSizeChange = (e: RadioChangeEvent) => {
        setActiveButton(e.target.value)
    }
    const handleChangeSalesType = (e: RadioChangeEvent) => {
        setSalesType(e.target.value)
    }
    return (
        <GridContent>
            <>
                <Suspense fallback={<PageLoading />}>
                    <IntroduceRow loading={loading} visitData={data?.visitData || []}></IntroduceRow>
                </Suspense>

                <Suspense fallback={null}>
                    <RevenueCard
                        rangePickerValue={rangePickerValue}
                        handleRangePickerChange={handleRangePickerChange}
                        selectDate={selectDate}
                        isActive={isActive}
                        loading={loading}
                        salesData={data?.salesData || []}
                    ></RevenueCard>
                </Suspense>

                <Row gutter={24}>
                    <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                        <Suspense fallback={null}>
                            <CustomerCard
                                loading={loading}
                                activeButton={activeButton}
                                visitData2={data?.visitData2 || []}
                                searchdata={ data?.searchData || []}
                                handleSizeChange={handleSizeChange}
                            ></CustomerCard>
                        </Suspense>
                    </Col>
                    <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                        <Suspense fallback={null}>
                            <ProportionSales
                                loading={loading}
                                salesType={salesType}
                                salesPieData={salesPieData ||[] }
                                handleChangeSalesType={handleChangeSalesType}
                            ></ProportionSales>
                        </Suspense>
                    </Col>
                </Row>

            </>
        </GridContent>
    );
}

export default Analysis;
