'use client'

import DateRangePicker from '@/components/RangeDatePicker'
import { ReportItem, ReportItemFooter, ReportItemHeader, ReportItemSubheader } from '@/components/report/ReportItem'
import { Button, Card, CardContent, Paper } from '@mui/material'
import { useState } from 'react'

const ReportCashFlowContent = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date())
  const [endDate, setEndDate] = useState<Date | null>(new Date())

  return (
    <Card>
      <div className='p-6 border-be'>
        <div className='flex items-center justify-end gap-2'>
          <Button
            color='secondary'
            variant='tonal'
            startIcon={<i className='tabler-upload' />}
            className='max-sm:is-full'
          >
            Ekspor
          </Button>
          <DateRangePicker
            startDate={startDate}
            endDate={endDate}
            onStartDateChange={setStartDate}
            onEndDateChange={setEndDate}
          />
        </div>
      </div>
      <CardContent>
        <ReportItemHeader title='Aktivitas Operasional' date='' />
        <ReportItem
          accountCode=''
          accountName='Penerimaan dari pelanggan'
          isSubtitle={false}
          amount={25437111}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Aset lancar lainnya'
          isSubtitle={false}
          amount={-433288}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Pembayaran ke pemasok'
          isSubtitle={false}
          amount={-4167460}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Kartu kredit dan liabilitas jangka pendek lainnya'
          amount={119550}
          isSubtitle={false}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Pendapatan lain-lain'
          isSubtitle={false}
          amount={54054}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Pembayaran biaya operasional'
          isSubtitle={false}
          amount={-6225315}
          onClick={() => {}}
        />
        <ReportItemFooter title='Arus kas bersih dari aktivitas operasional' amount={14784651} />
        <ReportItemSubheader title='' />

        <ReportItemHeader title='Aktivitas Investasi' date='' />
        <ReportItem
          accountCode=''
          accountName='Perolehan/pembelian aset'
          amount={0}
          isSubtitle={false}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Aktivitas investasi lainnya'
          amount={0}
          isSubtitle={false}
          onClick={() => {}}
        />
        <ReportItemFooter title='Arus kas bersih dari aktivitas investasi' amount={0} />
        <ReportItemSubheader title='' />

        <ReportItemHeader title='Aktivitas Pendanaan' date='' />
        <ReportItem
          accountCode=''
          accountName='Liabilitas Jangka Panjang'
          amount={0}
          isSubtitle={false}
          onClick={() => {}}
        />
        <ReportItem accountCode='' accountName='Modal pemilik' amount={0} isSubtitle={false} onClick={() => {}} />
        <ReportItemFooter title='Arus kas bersih dari aktivitas pendanaan' amount={0} />
        <ReportItemSubheader title='' />

        <ReportItemHeader title='Arus kas bersih' amount={14784651} />
        <ReportItemSubheader title='' />

        <ReportItemHeader title='Kas dan Setara Kas' date='' />
        <ReportItem
          accountCode=''
          accountName='Kas dan setara kas diawal periode'
          isSubtitle={false}
          amount={0}
          onClick={() => {}}
        />
        <ReportItem
          accountCode=''
          accountName='Kas dan setara kas diakhir periode'
          amount={73041637}
          isSubtitle={false}
          onClick={() => {}}
        />
        <ReportItemFooter title='Perubahan kas untuk periode' amount={73041637} />
        <ReportItemSubheader title='' />
      </CardContent>
    </Card>
  )
}

export default ReportCashFlowContent
