'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 labelColor = 'var(--mui-palette-text-disabled)'
const bodyColor = 'var(--mui-palette-text-secondary)'
const borderColor = 'var(--mui-palette-divider)'

const series = [
  {
    name: 'Pembayaran Diterima',
    data: [0, 0, 0, 0, 0, 67000000]
  }
]

const PurchasePaymentReceivedChart = () => {
  const options: ApexOptions = {
    chart: {
      parentHeightOffset: 0,
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    stroke: {
      width: 3,
      curve: 'smooth'
    },
    markers: {
      size: 6,
      colors: ['#00CFE8'],
      strokeColors: '#fff',
      strokeWidth: 2,
      hover: {
        size: 8
      }
    },
    tooltip: {
      enabled: true,
      y: {
        formatter: function (val) {
          return 'Rp ' + val.toLocaleString('id-ID')
        }
      }
    },
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: ['2020', '2021', '2022', '2023', '2024', '2025'],
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        }
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    yaxis: {
      tickAmount: 7,
      max: 70000000,
      min: 0,
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        },
        formatter(val: number) {
          if (val === 0) return '0'
          return (val / 1000000).toFixed(0) + '.000.000'
        }
      }
    },
    legend: {
      show: false
    },
    grid: {
      borderColor,
      strokeDashArray: 6,
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: true
        }
      }
    },
    colors: ['#00CFE8'],
    fill: {
      opacity: 1
    }
  }

  return (
    <Card className='mt-5'>
      <CardHeader
        title='Pembayaran'
        action={
          <div className='flex items-center gap-2'>
            <div className='w-4 h-4 bg-gray-300 rounded cursor-pointer'></div>
            <OptionMenu options={['View More', 'Delete']} />
          </div>
        }
      />
      <CardContent>
        <AppReactApexCharts
          id='pembayaran-diterima'
          type='line'
          height={360}
          width='100%'
          series={series}
          options={options}
        />
      </CardContent>
    </Card>
  )
}

export default PurchasePaymentReceivedChart
