123

import merge from 'lodash/merge';
import { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
// @mui
import { Card, CardHeader, Box, TextField } from '@mui/material';
// components
import { BaseOptionChart } from '../../../../components/chart';

// ----------------------------------------------------------------------

const CHART_DATA = [
  {
    year: 2019,
    data: [
      { name: 'Decision tree', data: [88.89, 82.22, 82.22, 85.56, 86.67, 85.56, 83.33, 91.11, 84.44, 85.56] },
      { name: 'KNN', data: [84.44, 77.78, 84.44, 83.33, 87.78, 82.22, 88.89, 87.78, 76.67, 84.44] },
      { name: 'Bayes', data: [85.56, 74.44, 81.11, 80.0, 85.56, 83.33, 82.22, 88.89, 80.0, 82.22] },
    ],
  },
  {
    year: 2020,
    data: [
      { name: 'Decision tree', data: [148, 91, 69, 62, 49, 51, 35, 41, 10] },
      { name: 'Bayes', data: [45, 77, 99, 88, 77, 56, 13, 34, 10] },
    ],
  },
];

export default function AppAreaInstalled() {
  const [seriesData, setSeriesData] = useState(2019);

  const handleChangeSeriesData = (event) => {
    setSeriesData(Number(event.target.value));
  };

  const chartOptions = merge(BaseOptionChart(), {
    xaxis: {
      categories: ['Lần 1', 'Lần 2', 'Lần 3', 'Lần 4', 'Lần 5', 'Lần 6', 'Lần 7', 'Lần 8', 'Lần 9', "Lần 10"],
    },
    colors: ['#2065D1', '#FFE700', '#FF6C40'],
  });

  return (
    <Card>
      <CardHeader
        title="Area Installed"
        subheader="(+43%) than last year"
        action={
          <TextField
            select
            fullWidth
            value={seriesData}
            SelectProps={{ native: true }}
            onChange={handleChangeSeriesData}
            sx={{
              '& fieldset': { border: '0 !important' },
              '& select': {
                pl: 1,
                py: 0.5,
                pr: '24px !important',
                typography: 'subtitle2',
              },
              '& .MuiOutlinedInput-root': {
                borderRadius: 0.75,
                bgcolor: 'background.neutral',
              },
              '& .MuiNativeSelect-icon': {
                top: 4,
                right: 0,
                width: 20,
                height: 20,
              },
            }}
          >
            {CHART_DATA.map((option) => (
              <option key={option.year} value={option.year}>
                {option.year}
              </option>
            ))}
          </TextField>
        }
      />

      {CHART_DATA.map((item) => (
        <Box key={item.year} sx={{ mt: 3, mx: 3 }} dir="ltr">
          {item.year === seriesData && (
            <ReactApexChart type="line" series={item.data} options={chartOptions} height={364} />
          )}
        </Box>
      ))}
    </Card>
  );
}