'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 = {
  tagihan: '#28C76F',
  pembayaran: '#EA5455'
}

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

const series = [
  {
    name: 'Tagihan',
    type: 'column',
    data: [1250, 1180, 1350, 1450, 1200, 1520, 1380, 1150, 1650, 1400, 1290, 1700]
  },
  {
    name: 'Pembayaran',
    type: 'column',
    data: [950, 880, 1050, 1150, 900, 1220, 1080, 850, 1350, 1100, 990, 1400]
  }
]

const SalesBillPaymentChart = () => {
  const options: ApexOptions = {
    chart: {
      parentHeightOffset: 0,
      stacked: false,
      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: 4
      }
    },
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        }
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    yaxis: {
      tickAmount: 5,
      max: 1800,
      min: 0,
      labels: {
        style: {
          colors: labelColor,
          fontSize: '13px',
          fontFamily: 'Public Sans',
          fontWeight: 400
        },
        formatter(val: number) {
          return 'Rp ' + val + 'rb'
        }
      }
    },
    legend: {
      markers: {
        width: 8,
        height: 8,
        offsetX: -3,
        radius: 12
      },
      height: 33,
      offsetY: 10,
      itemMargin: {
        horizontal: 10,
        vertical: 0
      },
      fontSize: '13px',
      fontFamily: 'Public Sans',
      fontWeight: 400,
      labels: {
        colors: bodyColor,
        useSeriesColors: false
      }
    },
    grid: {
      borderColor,
      strokeDashArray: 6
    },
    colors: [colors.tagihan, colors.pembayaran],
    fill: {
      opacity: 1
    }
  }

  return (
    <Card className='mt-5'>
      <CardHeader title='Tagihan & Pembayaran' action={<OptionMenu options={['View More', 'Delete']} />} />
      <CardContent>
        <AppReactApexCharts
          id='tagihan-pembayaran'
          type='bar'
          height={360}
          width='100%'
          series={series}
          options={options}
        />
      </CardContent>
    </Card>
  )
}

export default SalesBillPaymentChart