import ImageInputAndDisplay from '@/components/app/image-input-and-display';
import DashboardLayout from '@/components/dashboard/dashboard-layout';
import CategoriesRadio from '@/components/programs/categories-radio';
import DifficultyCheckbox from '@/components/programs/difficulty-checkbox';
import { ExercisesContainer } from '@/components/programs/exercises-container';
import ProtectedAdmin from '@/layouts/main-layout-protected-admin';
import { trpc } from '@/utils/trpc';
import {
  Button,
  FormControl,
  FormGroup,
  FormLabel,
  Grid,
  Stack,
  TextField,
  Typography
} from '@mui/material';
import { useState } from 'react';

type Exercise = {
  children: JSX.Element[];
  nextKey: number;
}

export type ExercisesProps = {
  id: string;
  reps: string;
  sets: string;
  rest: string;
}

export type ProgramDataProps = {
  name: string;
  description: string;
  category: string;
  difficulty: number[];
  exercises: ExercisesProps[];
}

const AdminCreatePrograms = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [programData, setProgramData] = useState<ProgramDataProps>({
    name: '',
    description: '',
    category: '',
    difficulty: [],
    exercises: [],
  });

  const { mutateAsync } = trpc.program.createProgram.useMutation()

  const submitProgram = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    console.log(programData);
    await mutateAsync({ programData: programData })
      .then((data) => {
        console.log(data);
        location.reload();
      })
      .catch((error) => {
        console.log(error);
      });
  }

  return (
    <DashboardLayout>
      <ProtectedAdmin>
        <Stack
          flexDirection={'column'}
        >
          <Typography variant='h2'>Create Programs</Typography>
          <Typography variant='subtitle1'>Create new programs for the platform here</Typography>
          <FormControl
            component={'form'}
            onSubmit={submitProgram}
            sx={{
              mt: '25px'
            }}
          >
            <Grid container spacing={1}>
              <Grid item xs={12} md={3}>
                <ImageInputAndDisplay
                  selectedFile={selectedFile}
                  setSelectedFile={setSelectedFile}
                />
              </Grid>
              <Grid item xs={12} md={9}>
                <FormLabel component="legend">Program Name</FormLabel>
                <TextField
                  label={'Program Name'}
                  variant={'outlined'}
                  onChange={(event) => setProgramData(prevState => ({ ...prevState, name: event.target.value }))}
                  sx={{
                    width: '200px'
                  }}
                />
                <FormLabel component="legend">Description</FormLabel>
                <TextField
                  label={'Description'}
                  variant={'outlined'}
                  onChange={(event) => setProgramData(prevState => ({ ...prevState, description: event.target.value }))}
                  multiline
                  sx={{
                    width: '400px',
                    maxWidth: '100%'
                  }}
                />
              </Grid>
            </Grid>

            <FormLabel component="legend">Category</FormLabel>
            <FormGroup>
              <CategoriesRadio
                setProgramData={setProgramData}
              />
            </FormGroup>

            <FormLabel component={'legend'}>Difficulty Level</FormLabel>
            <FormGroup sx={{ flexDirection: 'row' }}>
              <DifficultyCheckbox
                setProgramData={setProgramData}
                selectedLevels={programData.difficulty || []}
              />
            </FormGroup>

            <FormLabel component={'legend'} sx={{ mb: '10px' }}>Exercises</FormLabel>
            <ExercisesContainer
              setProgramData={setProgramData}
            />

            <Button type='submit' variant='contained'>Save Program</Button>

          </FormControl>
        </Stack>
      </ProtectedAdmin>
    </DashboardLayout>
  )
}

export default AdminCreatePrograms