'use client'

import Grid from '@mui/material/Grid2'

import { TextField, Typography, useTheme } from '@mui/material'
import { useState } from 'react'
import { formatDateDDMMYYYY, formatForInputDate } from '@/utils/transform'
import SalesOverviewRight from '@/views/apps/sales/overview/overview-right'
import SalesOverviewLeft from '@/views/apps/sales/overview/overview-left'

const SalesOverviewPage = () => {
  const theme = useTheme()

  const today = new Date()
  const monthAgo = new Date()
  monthAgo.setDate(today.getDate() - 30)

  const [filter, setFilter] = useState({
    date_from: formatDateDDMMYYYY(monthAgo),
    date_to: formatDateDDMMYYYY(today)
  })

  return (
    <>
      <Grid container spacing={6}>
        <Grid size={{ xs: 12 }}>
          <div className='flex gap-4 items-center justify-between'>
            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
              Overview Penjualan
            </Typography>
            <div className='flex items-center gap-4'>
              <TextField
                type='date'
                value={formatForInputDate(today || new Date())}
                onChange={e => {
                  setFilter({
                    ...filter,
                    date_from: formatDateDDMMYYYY(new Date(e.target.value))
                  })
                }}
                size='small'
                sx={{
                  '& .MuiOutlinedInput-root': {
                    '&.Mui-focused fieldset': {
                      borderColor: 'primary.main'
                    },
                    '& fieldset': {
                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                    }
                  }
                }}
              />
              <Typography>-</Typography>
              <TextField
                type='date'
                value={today}
                onChange={e => {}}
                size='small'
                sx={{
                  '& .MuiOutlinedInput-root': {
                    '&.Mui-focused fieldset': {
                      borderColor: 'primary.main'
                    },
                    '& fieldset': {
                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                    }
                  }
                }}
              />
            </div>
          </div>
        </Grid>
      </Grid>
      <Grid container spacing={6} className='mt-5'>
        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
          <SalesOverviewRight />
        </Grid>
        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
          <SalesOverviewLeft />
        </Grid>
      </Grid>
    </>
  )
}

export default SalesOverviewPage