import LabeledInput from '@/components/labeled-input';
import { Button } from '@/components/custom-ui/button';
import Logo from '../logo';
import TimePicker from '../time-picker';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
export default function EventForm() {
  return (
    <form
      className='flex flex-col gap-5 w-full'
      action={async (formData) => {
        'use server';
        console.log('Form submitted with data:', formData);
      }}
    >
      <div className='grid grid-row-start:auto gap-8'>
        <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
          <div>
            <Logo colorType='monochrome' logoType='submark' width={50} />
          </div>
          <div className='items-center ml-auto mr-auto max-sm:mb-6'>
            <LabeledInput
              type='text'
              label='Event Name'
              placeholder='New Event'
              name='eventName'
            />
          </div>
        </div>
        <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
          <div>
            <TimePicker dateLabel='start Time' timeLabel='&nbsp;' />
          </div>
          <div>
            <TimePicker dateLabel='end Time' timeLabel='&nbsp;' />
          </div>
          <div>
            <p className='mb-2'>Location URL</p>
            <Input type='url' className='w-54' />
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row gap-2'>
              <Label>created:</Label>
              <Label className='text-[var(--color-neutral-300)]'>
                2023-10-01
              </Label>
            </div>
            <div className='flex flex-row gap-2'>
              <Label>updated:</Label>
              <p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
            </div>
          </div>
        </div>
        <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
          <div className='h-full w-full grid grid-flow-row gap-4'>
            <div className='h-full w-full'>
              <div className='flex flex-row gap-2'>
                <Label>Organiser:</Label>
                <Label className='text-[var(--color-neutral-300)]'>
                  [Username here]
                </Label>
              </div>
            </div>
            <div className='h-full w-full'>
              <LabeledInput
                type='text'
                label='Event Description'
                placeholder='What is the event about?'
                name='eventDescription'
                big={true}
              ></LabeledInput>
            </div>
          </div>
          <div className='h-full w-full'>
            <Label>Participants here</Label>
          </div>
        </div>

        <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
          <div className='w-[20%] grid max-sm:w-[40%]'>
            <Button type='button' variant='secondary'>
              cancel
            </Button>
          </div>

          <div className='w-[20%] grid max-sm:w-[40%]'>
            <Button type='submit' variant='primary'>
              save event
            </Button>
          </div>
        </div>
      </div>
    </form>
  );
}