'use client';

import {
  Dropbox as IconDropbox,
  GoogleDrive as IconGoogleDrive,
} from '@/components/misc/logo-icons';
import React from 'react';
import { X, Folder } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as CompactButton from '@/components/ui/compact-button';
import * as FileUpload from '@/components/ui/file-upload';
import * as Modal from '@/components/ui/modal';
import * as SocialButton from '@/components/ui/social-button';

export default function CloudFileUploadDialog() {
  const [open, setOpen] = React.useState(true);

  return (
    <Modal.Root defaultOpen open={open} onOpenChange={setOpen}>
      <Modal.Trigger>
        <Button.Root variant='neutral' mode='stroke'>
          Add People
        </Button.Root>
      </Modal.Trigger>
      <Modal.Content
        className='shadow-custom-sm max-w-[580px]'
        showClose={false}
        aria-describedby={undefined}
      >
        <Modal.Body className='p-4 pt-5'>
          <div className='flex flex-col gap-5'>
            <div className='flex items-center justify-between'>
              <Modal.Title asChild>
                <span className='!text-label-md text-text-strong-950'>
                  Upload file
                </span>
              </Modal.Title>
              <CompactButton.Root tabIndex={-1} variant='ghost'>
                <CompactButton.Icon as={X} onClick={() => setOpen(false)} />
              </CompactButton.Root>
            </div>
            <FileUpload.Root className='hover:bg-bg-white border-stroke-sub-300 flex h-[268px] w-full flex-col items-center justify-center rounded-xl p-8'>
              <input type='file' tabIndex={-1} className='hidden' multiple />
              <div className='pointer-events-none flex flex-col items-center gap-5 text-center'>
                <span className='text-label-md text-text-sub-600'>
                  Drop files here,{' '}
                  <a
                    href='#'
                    className='text-primary-base pointer-events-auto font-medium hover:underline'
                  >
                    browse files
                  </a>{' '}
                  or import from:
                </span>
                <div className='flex flex-wrap justify-center gap-3'>
                  <FileUpload.Button className='hover:bg-bg-weak-50 hover:!shadow-regular-xs pointer-events-auto !h-10 gap-2 rounded-full p-1.5 pr-4 transition-all hover:ring-0'>
                    <div className='bg-away-light flex size-7 items-center justify-center rounded-full'>
                      <Folder className='text-away-dark size-4' />
                    </div>
                    <span className='text-label-sm text-text-sub-600'>
                      My Device
                    </span>
                  </FileUpload.Button>
                  <FileUpload.Button className='hover:bg-bg-weak-50 hover:!shadow-regular-xs pointer-events-auto !h-10 gap-2 rounded-full p-1.5 pr-4 transition-all hover:ring-0'>
                    <div className='bg-primary-base flex size-7 items-center justify-center rounded-full'>
                      <SocialButton.Icon as={IconDropbox} className='size-4' />
                    </div>
                    <span className='text-label-sm text-text-sub-600'>
                      Dropbox
                    </span>
                  </FileUpload.Button>
                  <FileUpload.Button className='hover:bg-bg-weak-50 hover:!shadow-regular-xs pointer-events-auto !h-10 gap-2 rounded-full p-1.5 pr-4 transition-all hover:ring-0'>
                    <div className='flex size-7 items-center justify-center rounded-full bg-gray-50'>
                      <SocialButton.Icon
                        as={IconGoogleDrive}
                        className='size-4'
                      />
                    </div>
                    <span className='text-label-sm text-text-sub-600'>
                      Google Drive
                    </span>
                  </FileUpload.Button>
                </div>
              </div>
            </FileUpload.Root>
          </div>
        </Modal.Body>
      </Modal.Content>
    </Modal.Root>
  );
}