'use client';

import { Dashboard } from '@uppy/react';
import React from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Switch from '@/components/switch/Switch';
import { UploadState } from '@/hooks/songify/useUploadState';

export interface CreateViewProps {
  uploadState: UploadState;
  handleSubmit: (e: React.FormEvent) => void;
  s3FileName: string;
  genre: string;
  musicStyles: string[];
  setGenre: (genre: string) => void;
  enableLyricOverlay: boolean;
  setEnableLyricOverlay: (enabled: boolean) => void;
  isSubmitting?: boolean;
}

export function CreateView({
  uploadState,
  handleSubmit,
  genre,
  musicStyles,
  setGenre,
  enableLyricOverlay,
  setEnableLyricOverlay,
  isSubmitting = false,
}: CreateViewProps) {
  return (
    <div className='songify-create-view'>
      <div className='mb-8 flex items-center justify-between'>
        <h1 className='text-3xl font-bold text-foreground-primary'>
          Create a New Songify Video
        </h1>
      </div>

      <form onSubmit={handleSubmit} className='space-y-6'>
        <div>
          <span className='mb-2 block text-lg font-medium text-foreground-primary'>
            Upload Video
          </span>
          <div className='flex flex-col gap-4'>
            <div>
              <Dashboard
                width='100%'
                height={250}
                theme='light'
                proudlyDisplayPoweredByUppy={false}
                uppy={uploadState.uppy}
                plugins={['Video']}
                doneButtonHandler={undefined}
                showRemoveButtonAfterComplete={true}
                singleFileFullScreen={true}
              />
              <div className='mt-4 font-sans text-sm text-foreground-tertiary'>
                MP4, MOV, AVI, MKV, WMV, WEBM supported
              </div>
            </div>
          </div>
        </div>

        <div>
          <label
            htmlFor='genre-select'
            className='mb-2 block text-sm font-medium text-foreground-primary'
          >
            Select Genre
          </label>
          <select
            id='genre-select'
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className='w-full rounded-lg border border-border-primary bg-background-primary px-4 py-2 text-foreground-primary focus:border-transparent focus:ring-2 focus:ring-accent-brand'
            size={8}
          >
            {musicStyles.map((style) => (
              <option key={style} value={style}>
                {style}
              </option>
            ))}
          </select>
        </div>

        <div className='flex items-center justify-between rounded-lg border border-border-primary bg-background-tertiary p-4'>
          <div>
            <span className='text-sm font-medium text-foreground-primary'>
              Enable lyric overlay
            </span>
            <p className='mt-1 text-xs text-foreground-tertiary'>
              Add synchronized lyrics to your videos
            </p>
          </div>
          <Switch
            checked={enableLyricOverlay}
            onChange={setEnableLyricOverlay}
          />
        </div>

        <Button
          type='submit'
          disabled={
            !uploadState.uploadSuccess ||
            !uploadState.uploadedFilename ||
            isSubmitting
          }
          variant={ButtonVariant.Primary}
          size={ButtonSize.Medium}
          shape={ButtonShape.Pill}
          onClick={handleSubmit}
          className={twMerge(
            'w-full bg-accent-pink text-foreground-primary hover:bg-accent-pink/90',
            (isSubmitting ||
              !uploadState.uploadSuccess ||
              !uploadState.uploadedFilename) &&
              'opacity-50'
          )}
        >
          {isSubmitting ? 'Creating...' : 'Create Videos'}
        </Button>
      </form>
    </div>
  );
}