import React, { useEffect, useState } from 'react'
import {
    Button,
    FormControl,
    Grid,
    InputLabel,
    Select,
    TextField,
    Icon,
    Typography,
    Card,
    MenuItem,
} from '@material-ui/core'
import { Breadcrumb, SimpleCard } from 'app/components'
import 'date-fns'
import CustomPieChart from 'app/components/Chart/PieChart'
import { toPriceVnd, convertDate } from 'app/config/Function'
import DateRange from 'app/components/Input/DateHome'
import { KeyboardDatePicker } from '@material-ui/pickers'

//import { reportStorePieChart } from 'app/apis/Functions/dashboard'

const ReportQuantity = ({ user }) => {
    const [state, setState] = useState([])
    const [status, setStatus] = useState(1)
    const [startDate, setStartDate] = useState(new Date())
    const color = ['#73DDFF', '#45C8F1', '#659FEA', '#124F9F']

    useEffect(() => {
        //  getData()
    }, [startDate, status])
    const handleDateChangeLast = (date) => {
        console.log('date', date)
        setStartDate(date)
    }

    // const getData = async () => {
    //     if (startDate) {
    //         const res = await reportStorePieChart({
    //             month: parseInt(convertDate(startDate).substring(3, 5)),
    //             year: parseInt(convertDate(startDate).substring(6, 10)),
    //             type_chart: status,
    //             store_id: user?.store_id,
    //         })
    //         if (res.data.code == 200 && res.data.data) {
    //             const newList = res.data.data.map((e) => {
    //                 return {
    //                     ...e,
    //                     value: e?.total_revenue,
    //                     name: e?.product_name,
    //                 }
    //             })
    //             setState(newList)
    //         } else {
    //             setState([])
    //         }
    //     }
    // }

    return (
        <div className="mb-sm-20">
            <CustomPieChart
                data={[
                    {
                        value: 20,
                        name: 'hêleo',
                    },
                    {
                        value: 26,
                        name: 'hêleo12',
                    },
                ]}
                color={color}
            />

            {/* <Grid
                        style={{
                            marginTop: 20,
                            alignItems: 'center',
                            justifyContent: 'center',
                            display: 'flex',
                        }}
                        lg={4}
                        md={4}
                        sm={4}
                        xs={4}
                    >
                        <div
                            style={{
                                alignItems: 'center',
                                justifyContent: 'center',
                                marginBottom: 20,
                            }}
                        >
                            <Typography
                                style={{
                                    fontSize: 20,
                                    marginBottom: 30,
                                    textAlign: 'center',
                                    lineHeight: 1,
                                }}
                            >
                                Cơ cấu doanh số theo sản phẩm
                            </Typography>
                            {state?.map((e, i) => (
                                <div
                                    style={{
                                        display: 'flex',
                                    }}
                                >
                                    <div
                                        style={{
                                            width: 14,
                                            height: 14,
                                            backgroundColor: color[i],
                                            borderRadius: 10,
                                            marginRight: 10,
                                            marginTop: 2,
                                        }}
                                    />
                                    <Typography
                                        style={{
                                            fontSize: 12,
                                            color: '#4B5563',
                                        }}
                                    >
                                        {e?.name}
                                    </Typography>
                                </div>
                            ))}
                        </div>
                    </Grid> */}
        </div>
    )
}

export default ReportQuantity
