'use client'

// Next Imports
import dynamic from 'next/dynamic'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'

// Third Party Imports
import type { ApexOptions } from 'apexcharts'

// Components Imports
import OptionMenu from '@core/components/option-menu'

// Styled Component Imports
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))

// Styles Imports
import './styles.css'

// Vars
const colors = ['#EA5455', '#FFB830', '#28C76F', '#00CFE8', '#795548', '#E91E63']

const labelColor = 'var(--mui-palette-text-disabled)'
const bodyColor = 'var(--mui-palette-text-secondary)'
const borderColor = 'var(--mui-palette-divider)'

const series = [
  {
    name: '2020',
    data: [1850]
  },
  {
    name: '2021',
    data: [2150]
  },
  {
    name: '2022',
    data: [2450]
  },
  {
    name: '2023',
    data: [2750]
  },
  {
    name: '2024',
    data: [3050]
  },
  {
    name: '2025',
    data: [3350]
  }
]

const SalesPerPersonChart = () => {
  const options: ApexOptions = {
    chart: {
      parentHeightOffset: 0,
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    tooltip: {
      enabled: true,
      y: {
        formatter: function (val) {
          return 'Rp ' + val.toLocaleString('id-ID') + '.000'
        }
      }
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '60%',
        borderRadius: 6,
        dataLabels: {
          position: 'top'
        }
      }
    },
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: ['Jason Marc'],
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        }
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    yaxis: {
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        }
      }
    },
    legend: {
      markers: {
        width: 8,
        height: 8,
        offsetX: -3,
        radius: 12
      },
      height: 40,
      offsetY: 10,
      itemMargin: {
        horizontal: 10,
        vertical: 0
      },
      fontSize: '13px',
      fontFamily: 'Public Sans',
      fontWeight: 400,
      labels: {
        colors: bodyColor,
        useSeriesColors: false
      }
    },
    grid: {
      borderColor,
      strokeDashArray: 6,
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: false
        }
      }
    },
    colors: colors,
    fill: {
      opacity: 1
    }
  }

  return (
    <Card className='mt-5'>
      <CardHeader title='Penjualan per Sales Person' action={<OptionMenu options={['View More', 'Delete']} />} />
      <CardContent>
        <AppReactApexCharts
          id='penjualan-per-sales-person'
          type='bar'
          height={360}
          width='100%'
          series={series}
          options={options}
        />
      </CardContent>
    </Card>
  )
}

export default SalesPerPersonChart
