import { useWizard } from '@/components/wizard'
import { Currency } from '@repo/ui/components/currency'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow
} from '@repo/ui/components/ui/table'

type ReviewProps = {
  state: any
}

export function Review({ state }: ReviewProps) {
  const wizard = useWizard()
  // console.log(state)

  return (
    <>
      <Table>
        <TableHeader>
          <TableRow className="pointer-events-none">
            <TableHead>Curso</TableHead>
            <TableHead>Quantidade</TableHead>
            <TableHead>Valor unit.</TableHead>
            <TableHead>Total</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {state?.cart?.items?.map(({ course, quantity }, index) => {
            return (
              <TableRow key={index}>
                <TableCell>{course.name}</TableCell>
                <TableCell>{quantity}</TableCell>
                <TableCell>
                  <Currency>{course.unit_price}</Currency>
                </TableCell>
                <TableCell>
                  <Currency>{course.unit_price * quantity}</Currency>
                </TableCell>
              </TableRow>
            )
          })}
        </TableBody>
        <TableFooter>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Subtotal
            </TableCell>
            <TableCell>..</TableCell>
          </TableRow>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Descontos
            </TableCell>
            <TableCell>..</TableCell>
          </TableRow>
          <TableRow className="pointer-events-none">
            <TableCell className="text-right" colSpan={3}>
              Total
            </TableCell>
            <TableCell>..</TableCell>
          </TableRow>
        </TableFooter>
      </Table>

      <Separator />

      <div className="flex justify-end gap-4 *:cursor-pointer">
        <Button
          type="button"
          variant="link"
          className="text-black dark:text-white"
          onClick={() => wizard('payment')}
        >
          Voltar
        </Button>
        <Button type="submit">Confirmar</Button>
      </div>
    </>
  )
}