import ImageInputAndDisplay from '@/components/app/image-input-and-display';
import { difficultyLevels, exerciseCategories } from '@/utils/data/exercise-categories';
import { trpc } from '@/utils/trpc';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import { Box, Button, Divider, Grid, MenuItem, Stack, TextField } from '@mui/material';
import { useState } from 'react';
import { toast } from 'react-toastify';

type NewExerciseProps = {
  positionId?: number;
  removeExercise?: (removeKey: number) => void;
  cancel?: () => void;
  onSave: React.Dispatch<React.SetStateAction<any>>
}

const NewExercise = ({ positionId, removeExercise, cancel, onSave }: NewExerciseProps) => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [selectedCategory, setSelectedCategory] = useState('');
  const [selectedDifficulty, setSelectedDifficulty] = useState('');
  const [description, setDescription] = useState('');
  const [name, setName] = useState('');
  const [videoUrl, setVideoUrl] = useState('');

  const { mutateAsync } = trpc.exercise.createExercise.useMutation();

  const handleRemove = () => {
    if (removeExercise === undefined) return toast.error('Error removing exercise')
    removeExercise(positionId as number)
  }

  const handleSave = async () => {
    if (selectedFile === null) return toast.error('Please upload an image')
    if (selectedCategory === '') return toast.error('Please select a category')
    if (selectedDifficulty === '') return toast.error('Please select a difficulty')
    if (description === '') return toast.error('Please enter a description')
    if (name === '') return toast.error('Please enter a name')
    if (videoUrl === '') return toast.error('Please enter a video url')

    const formData = {
      image: selectedFile.name,
      category: selectedCategory,
      difficulty: selectedDifficulty,
      description: description,
      name: name,
      video: videoUrl
    }

    console.log(formData)
    await mutateAsync(formData)
      .then((data) => {
        onSave({
          id: data.id,
          name: data.name,
        })
      })
      .catch((error) => {
        toast.error('Error creating exercise')
        console.log(error)
      })
  }

  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs={12} md={2}>
          <ImageInputAndDisplay
            selectedFile={selectedFile}
            setSelectedFile={setSelectedFile}
          />
        </Grid>
        <Grid item xs={12} md={9}>
          <Stack spacing={1} direction={'row'} justifyContent={'flex-start'}>
            <Stack spacing={1} sx={{ width: '100%', height: '100%' }}>
              <TextField
                label={'Exercise Name'}
                variant={'outlined'}
                sx={{
                  width: '200px'
                }}
                inputProps={{
                  maxLength: 30
                }}
                onChange={(event) => setName(event.target.value)}
              />
              <TextField
                label={'Description'}
                multiline
                rows={4}
                onChange={(event) => setDescription(event.target.value)}
              />
            </Stack>
            <Stack spacing={1} sx={{ width: '100%' }}>
              <TextField
                label={'Video url'}
                onChange={(event) => setVideoUrl(event.target.value)}
              />
              <TextField
                select
                label={'Category'}
                value={selectedCategory}
                onChange={(event) => setSelectedCategory(event.target.value)}
              >
                <MenuItem value=''>Select Item</MenuItem>
                {exerciseCategories.map((category, index) => (
                  <MenuItem key={index} value={category.value}>{category.name}</MenuItem>
                ))}
              </TextField>
              <TextField
                select
                label={'Difficulty'}
                value={selectedDifficulty}
                onChange={(event) => setSelectedDifficulty(event.target.value)}
              >
                <MenuItem value='' >Select Item</MenuItem>
                {difficultyLevels.map((category, index) => (
                  <MenuItem key={index} value={category.value}>{category.name}</MenuItem>
                ))}
              </TextField>
            </Stack>
          </Stack>
        </Grid>
        <Grid item xs={12} md={1}>
          <Button
            color='success'
            sx={{ width: '100%', py: '10px' }}
            onClick={handleSave}
          >
            Save <AddIcon />
          </Button>
          {positionId !== undefined && (
            <Button
              color='error'
              onClick={handleRemove}
              sx={{ width: '100%' }}
            >
              Remove <DeleteIcon />
            </Button>
          )}
        </Grid>
      </Grid>
      <Box>
        <Button
          onClick={cancel}
        >Cancel</Button>
      </Box>
      <Divider sx={{ my: '10px' }} />
    </>
  )
}

export default NewExercise