'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'))

// Vars
const series = [52.2]

const PurchasePaymentRatioGaugeChart = () => {
  const options: ApexOptions = {
    chart: {
      type: 'radialBar',
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      radialBar: {
        startAngle: -90,
        endAngle: 90,
        track: {
          background: '#e7e7e7',
          strokeWidth: '97%',
          margin: 5,
          dropShadow: {
            enabled: false
          }
        },
        hollow: {
          margin: 15,
          size: '70%'
        },
        dataLabels: {
          name: {
            show: false
          },
          value: {
            offsetY: -10,
            fontSize: '32px',
            fontWeight: 'bold',
            color: '#1f2937',
            formatter: function (val) {
              return val + '%'
            }
          }
        }
      }
    },
    grid: {
      padding: {
        top: -10
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        shadeIntensity: 0.4,
        inverseColors: false,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 50, 53, 91]
      }
    },
    colors: ['#3b82f6'],
    stroke: {
      dashArray: 4
    },
    labels: ['Rasio Lunas']
  }

  return (
    <Card>
      <CardHeader title='Rasio Lunas' action={<OptionMenu options={['View More', 'Delete']} />} />
      <CardContent className='flex flex-col items-center pb-6'>
        <AppReactApexCharts
          id='rasio-lunas-gauge'
          type='radialBar'
          height={280}
          width='100%'
          series={series}
          options={options}
        />
        <div className='text-sm text-gray-500 text-center mt-4 max-w-xs'>
          Tagihan Pembelian lunas vs total Tagihan Pembelian bulan ini
        </div>
      </CardContent>
    </Card>
  )
}

export default PurchasePaymentRatioGaugeChart
