'use client';

import { AlignVerifiedBadgeIcon as CustomVerifiedIconSVG } from '@/components/misc/alignui-icons';
import * as React from 'react';
import {
  ChevronRight,
  History,
  Home,
  Lightbulb,
  PieChart,
  ShoppingCart,
} from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as Divider from '@/components/ui/divider';
import * as Drawer from '@/components/ui/drawer';
import Image from 'next/image';
const TransactionItem = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ children, ...rest }, forwardedRef) => {
  return (
    <button
      type='button'
      ref={forwardedRef}
      className='hover:bg-bg-weak-50 flex w-full items-center gap-3 rounded-xl py-2 text-left transition-all duration-200 ease-out hover:px-3'
      {...rest}
    >
      {children}
      <CompactButton.Root size='medium' variant='ghost'>
        <CompactButton.Icon as={ChevronRight} />
      </CompactButton.Root>
    </button>
  );
});
TransactionItem.displayName = 'TransactionItem';

export default function ContactTransactionsDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger asChild>
        <Button.Root variant='neutral' mode='stroke' onClick={() => {}}>
          Open Drawer
        </Button.Root>
      </Drawer.Trigger>
      <Drawer.Content className='rounded-20 bg-bg-white-0 shadow-custom-md absolute inset-y-0 mx-2 my-2 max-h-[calc(100%-16px)] w-[min(400px,calc(100%-16px))]'>
        <Drawer.Header>
          <Drawer.Title>Contact Details</Drawer.Title>
        </Drawer.Header>
        <Drawer.Body>
          <Divider.Root variant='solid-text'>contact</Divider.Root>

          <div className='flex flex-col items-center gap-4 px-5 py-6'>
            <Avatar.Root color='purple' size='64'>
              <Avatar.Image src='https://alignui.com/images/avatar/illustration/matthew.png' />
              <Avatar.Indicator position='top'>
                <CustomVerifiedIconSVG />
              </Avatar.Indicator>
            </Avatar.Root>
            <div className='space-y-1 text-center'>
              <div className='text-label-lg text-text-strong-950'>
                Matthew Johnson
              </div>
              <div className='text-paragraph-sm text-text-sub-600'>
                A-8486214
              </div>
            </div>
          </div>

          <Divider.Root variant='solid-text'>Information</Divider.Root>

          <div className='space-y-3 p-5'>
            <div className='space-y-1'>
              <div className='text-subheading-xs text-text-soft-400 uppercase'>
                Email Address
              </div>
              <div className='text-label-sm text-text-strong-950'>
                matthew@alignui.com
              </div>
            </div>
            <Divider.Root variant='line-spacing' />
            <div className='space-y-1'>
              <div className='text-subheading-xs text-text-soft-400 uppercase'>
                Phone number
              </div>
              <div className='text-label-sm text-text-strong-950'>
                +1 548 485 62 16
              </div>
            </div>
          </div>

          <Divider.Root variant='solid-text'>Recent Transactions</Divider.Root>

          <div className='space-y-2.5 px-5 py-3.5'>
            <TransactionItem>
              <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                <Image
                  src='https://alignui.com/images/major-brands/netflix.svg'
                  alt=''
                  className='size-6'
                  width={24}
                  height={24}
                />
              </div>
              <div className='min-w-0 flex-1 space-y-1'>
                <div className='text-label-sm text-text-strong-950'>
                  Netflix Cashback
                </div>
                <div className='text-paragraph-xs text-text-sub-600 truncate'>
                  Cashback of September, 2023
                </div>
              </div>
              <div className='space-y-1 text-right'>
                <div className='text-label-sm text-text-strong-950'>$36.24</div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  Sep 18
                </div>
              </div>
            </TransactionItem>
            <TransactionItem>
              <div className='bg-success-lighter flex size-10 shrink-0 items-center justify-center rounded-full'>
                <Home className='text-success-base size-5' />
              </div>
              <div className='min-w-0 flex-1 space-y-1'>
                <div className='text-label-sm text-text-strong-950'>
                  Rental Income
                </div>
                <div className='text-paragraph-xs text-text-sub-600 truncate'>
                  Rental payment from Mr. Dudley.
                </div>
              </div>
              <div className='space-y-1 text-right'>
                <div className='text-label-sm text-text-strong-950'>
                  $800.00
                </div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  Sep 17
                </div>
              </div>
            </TransactionItem>
            <TransactionItem>
              <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                <ShoppingCart className='text-text-sub-600 size-5' />
              </div>
              <div className='min-w-0 flex-1 space-y-1'>
                <div className='text-label-sm text-text-strong-950'>
                  Grocery Shopping
                </div>
                <div className='text-paragraph-xs text-text-sub-600 truncate'>
                  Purchase of monthly groceries.
                </div>
              </div>
              <div className='space-y-1 text-right'>
                <div className='text-label-sm text-text-strong-950'>
                  -$84.14
                </div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  Sep 16
                </div>
              </div>
            </TransactionItem>
            <TransactionItem>
              <div className='bg-bg-white-0 shadow-regular-xs ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
                <PieChart className='text-text-sub-600 size-5' />
              </div>
              <div className='min-w-0 flex-1 space-y-1'>
                <div className='text-label-sm text-text-strong-950'>
                  Stock Dividend
                </div>
                <div className='text-paragraph-xs text-text-sub-600 truncate'>
                  Payment from stock investments.
                </div>
              </div>
              <div className='space-y-1 text-right'>
                <div className='text-label-sm text-text-strong-950'>
                  $1,500.00
                </div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  Sep 15
                </div>
              </div>
            </TransactionItem>
            <TransactionItem>
              <div className='bg-away-lighter flex size-10 shrink-0 items-center justify-center rounded-full'>
                <Lightbulb className='text-away-base size-5' />
              </div>
              <div className='min-w-0 flex-1 space-y-1'>
                <div className='text-label-sm text-text-strong-950'>
                  Electricity Bills
                </div>
                <div className='text-paragraph-xs text-text-sub-600 truncate'>
                  Payment for electricity bills.
                </div>
              </div>
              <div className='space-y-1 text-right'>
                <div className='text-label-sm text-text-strong-950'>
                  -$72.32
                </div>
                <div className='text-paragraph-xs text-text-sub-600'>
                  Sep 14
                </div>
              </div>
            </TransactionItem>
          </div>
        </Drawer.Body>

        <Drawer.Footer className='border-t'>
          <Button.Root
            variant='neutral'
            mode='stroke'
            size='medium'
            className='w-full'
          >
            <Button.Icon as={History} />
            See All Transactions
          </Button.Root>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  );
}