'use client'

// React Imports
import { useEffect, useRef } from 'react'

// MUI Imports
import Typography from '@mui/material/Typography'
import Grid from '@mui/material/Grid'
import Divider from '@mui/material/Divider'

// Component Imports
import Logo from '@components/layout/shared/Logo'

// Style Imports
import tableStyles from '@core/styles/table.module.css'

// Vars
const data = [
  {
    Item: 'Premium Branding Package',
    Description: 'Branding & Promotion',
    Hours: 48,
    Qty: 1,
    Total: '$32'
  },
  {
    Item: 'Social Media',
    Description: 'Social media templates',
    Hours: 42,
    Qty: 1,
    Total: '$28'
  },
  {
    Item: 'Web Design',
    Description: 'Web designing package',
    Hours: 46,
    Qty: 1,
    Total: '$24'
  },
  {
    Item: 'SEO',
    Description: 'Search engine optimization',
    Hours: 40,
    Qty: 1,
    Total: '$22'
  }
]

const PrintPage = ({ invoiceData, id }) => {
  // Refs
  const initialized = useRef(false)

  useEffect(() => {
    if (!initialized.current) {
      initialized.current = true
      setTimeout(() => {
        window.print()
      }, 100)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <div className='p-6 bg-actionHover rounded'>
          <div className='flex justify-between gap-y-4 flex-col sm:flex-row'>
            <div className='flex flex-col gap-6'>
              <div className='flex items-center gap-2.5'>
                <Logo />
              </div>
              <div>
                <Typography color='text.primary'>Office 149, 450 South Brand Brooklyn</Typography>
                <Typography color='text.primary'>San Diego County, CA 91905, USA</Typography>
                <Typography color='text.primary'>+1 (123) 456 7891, +44 (876) 543 2198</Typography>
              </div>
            </div>
            <div className='flex flex-col gap-6'>
              <Typography variant='h5'>{`Invoice #${id}`}</Typography>
              <div className='flex flex-col gap-1'>
                <Typography color='text.primary'>{`Date Issued: ${invoiceData.issuedDate}`}</Typography>
                <Typography color='text.primary'>{`Date Due: ${invoiceData.dueDate}`}</Typography>
              </div>
            </div>
          </div>
        </div>
      </Grid>
      <Grid item xs={12}>
        <Grid container spacing={6}>
          <Grid item xs={12} sm={6}>
            <div className='flex flex-col gap-4'>
              <Typography className='font-medium' color='text.primary'>
                Invoice To:
              </Typography>
              <div>
                <Typography>{invoiceData.name}</Typography>
                <Typography>{invoiceData.company}</Typography>
                <Typography>{invoiceData.address}</Typography>
                <Typography>{invoiceData.contact}</Typography>
                <Typography>{invoiceData.companyEmail}</Typography>
              </div>
            </div>
          </Grid>
          <Grid item xs={12} sm={6}>
            <div className='flex flex-col gap-4'>
              <Typography className='font-medium' color='text.primary'>
                Bill To:
              </Typography>
              <div>
                <div className='flex items-center gap-4'>
                  <Typography className='min-is-[100px]'>Total Due:</Typography>
                  <Typography>$12,110.55</Typography>
                </div>
                <div className='flex items-center gap-4'>
                  <Typography className='min-is-[100px]'>Bank name:</Typography>
                  <Typography>American Bank</Typography>
                </div>
                <div className='flex items-center gap-4'>
                  <Typography className='min-is-[100px]'>Country:</Typography>
                  <Typography>United States</Typography>
                </div>
                <div className='flex items-center gap-4'>
                  <Typography className='min-is-[100px]'>IBAN:</Typography>
                  <Typography>ETD95476213874685</Typography>
                </div>
                <div className='flex items-center gap-4'>
                  <Typography className='min-is-[100px]'>SWIFT code:</Typography>
                  <Typography>BR91905</Typography>
                </div>
              </div>
            </div>
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12}>
        <div className='overflow-x-auto border rounded'>
          <table className={tableStyles.table}>
            <thead>
              <tr className='border-be'>
                <th className='!bg-transparent'>Item</th>
                <th className='!bg-transparent'>Description</th>
                <th className='!bg-transparent'>Hours</th>
                <th className='!bg-transparent'>Qty</th>
                <th className='!bg-transparent'>Total</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>
                    <Typography color='text.primary'>{item.Item}</Typography>
                  </td>
                  <td>
                    <Typography color='text.primary'>{item.Description}</Typography>
                  </td>
                  <td>
                    <Typography color='text.primary'>{item.Hours}</Typography>
                  </td>
                  <td>
                    <Typography color='text.primary'>{item.Qty}</Typography>
                  </td>
                  <td>
                    <Typography color='text.primary'>{item.Total}</Typography>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Grid>
      <Grid item xs={12}>
        <div className='flex justify-between flex-col gap-y-4 sm:flex-row'>
          <div className='flex flex-col gap-1 order-2 sm:order-[unset]'>
            <div className='flex items-center gap-2'>
              <Typography className='font-medium' color='text.primary'>
                Salesperson:
              </Typography>
              <Typography>Tommy Shelby</Typography>
            </div>
            <Typography>Thanks for your business</Typography>
          </div>
          <div className='min-is-[200px]'>
            <div className='flex items-center justify-between'>
              <Typography>Subtotal:</Typography>
              <Typography className='font-medium' color='text.primary'>
                $1800
              </Typography>
            </div>
            <div className='flex items-center justify-between'>
              <Typography>Discount:</Typography>
              <Typography className='font-medium' color='text.primary'>
                $28
              </Typography>
            </div>
            <div className='flex items-center justify-between'>
              <Typography>Tax:</Typography>
              <Typography className='font-medium' color='text.primary'>
                21%
              </Typography>
            </div>
            <Divider className='mlb-2' />
            <div className='flex items-center justify-between'>
              <Typography>Total:</Typography>
              <Typography className='font-medium' color='text.primary'>
                $1690
              </Typography>
            </div>
          </div>
        </div>
      </Grid>
      <Grid item xs={12}>
        <Divider className='border-dashed' />
      </Grid>
      <Grid item xs={12}>
        <Typography>
          <Typography component='span' className='font-medium' color='text.primary'>
            Note:
          </Typography>
          It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance
          projects. Thank You!
        </Typography>
      </Grid>
    </Grid>
  )
}

export default PrintPage
