import FormLayout, {
  ButtonBlack,
  Flex,
  FormField,
  FormLabel,
  FormMessage,
  Input,
} from '@components/Objects/StyledElements/Form/Form'
import React, { useState } from 'react'
import * as Form from '@radix-ui/react-form'
import BarLoader from 'react-spinners/BarLoader'
import { Youtube, Upload } from 'lucide-react'
import { constructAcceptValue } from '@/lib/constants'

const SUPPORTED_FILES = constructAcceptValue(['mp4', 'webm'])

interface ExternalVideoObject {
  name: string
  type: string
  uri: string
  chapter_id: string
}

function VideoModal({
  submitFileActivity,
  submitExternalVideo,
  chapterId,
  course,
}: any) {
  const [video, setVideo] = React.useState<File | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [name, setName] = React.useState('')
  const [youtubeUrl, setYoutubeUrl] = React.useState('')
  const [selectedView, setSelectedView] = React.useState<'file' | 'youtube'>('file')

  const handleVideoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files?.[0]) {
      setVideo(event.target.files[0])
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

    try {
      if (selectedView === 'file' && video) {
        await submitFileActivity(
          video,
          'video',
          {
            name: name,
            chapter_id: chapterId,
            activity_type: 'TYPE_VIDEO',
            activity_sub_type: 'SUBTYPE_VIDEO_HOSTED',
            published_version: 1,
            version: 1,
            course_id: course.id,
          },
          chapterId
        )
      }
      
      if (selectedView === 'youtube') {
        const external_video_object: ExternalVideoObject = {
          name,
          type: 'youtube',
          uri: youtubeUrl,
          chapter_id: chapterId,
        }

        await submitExternalVideo(
          external_video_object,
          'activity',
          chapterId
        )
      }
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <FormLayout onSubmit={handleSubmit}>
      <FormField name="video-activity-name">
        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
          <FormLabel>Activity Name</FormLabel>
          <FormMessage match="valueMissing">
            Please provide a name for your video activity
          </FormMessage>
        </Flex>
        <Form.Control asChild>
          <Input 
            value={name}
            onChange={(e) => setName(e.target.value)} 
            type="text" 
            required 
            placeholder="Enter activity name..."
          />
        </Form.Control>
      </FormField>

      <div className="mt-4 rounded-lg border border-gray-200">
        <div className="grid grid-cols-2 gap-0">
          <button
            type="button"
            onClick={() => setSelectedView('file')}
            className={`flex items-center justify-center p-4 gap-2 ${
              selectedView === 'file'
                ? 'bg-gray-100 border-b-2 border-black'
                : 'hover:bg-gray-50 border-b border-gray-200'
            }`}
          >
            <Upload size={18} />
            <span>Upload Video</span>
          </button>
          <button
            type="button"
            onClick={() => setSelectedView('youtube')}
            className={`flex items-center justify-center p-4 gap-2 ${
              selectedView === 'youtube'
                ? 'bg-gray-100 border-b-2 border-black'
                : 'hover:bg-gray-50 border-b border-gray-200'
            }`}
          >
            <Youtube size={18} />
            <span>YouTube Video</span>
          </button>
        </div>

        <div className="p-6">
          {selectedView === 'file' && (
            <div className="space-y-4">
              <FormField name="video-activity-file">
                <FormLabel>Video File</FormLabel>
                <div className="mt-2">
                  <input
                    type="file"
                    accept={SUPPORTED_FILES}
                    onChange={handleVideoChange}
                    required
                    className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-black file:text-white hover:file:bg-gray-800"
                  />
                </div>
              </FormField>
            </div>
          )}

          {selectedView === 'youtube' && (
            <div className="space-y-4">
              <FormField name="youtube-url">
                <FormLabel>YouTube URL</FormLabel>
                <Form.Control asChild>
                  <Input
                    value={youtubeUrl}
                    onChange={(e) => setYoutubeUrl(e.target.value)}
                    type="text"
                    required
                    placeholder="https://youtube.com/watch?v=..."
                  />
                </Form.Control>
              </FormField>
            </div>
          )}
        </div>
      </div>

      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
        <Form.Submit asChild>
          <ButtonBlack type="submit" css={{ marginTop: 10 }}>
            {isSubmitting ? (
              <BarLoader
                cssOverride={{ borderRadius: 60 }}
                width={60}
                color="#ffffff"
              />
            ) : (
              'Create Activity'
            )}
          </ButtonBlack>
        </Form.Submit>
      </Flex>
    </FormLayout>
  )
}

export default VideoModal