import { FormProvider, type UseFormReturn } from 'react-hook-form';

import Button from '@design-system/Buttons/Button';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

const FormWrapper = ({
  children,
  form,
}: {
  children: React.ReactNode;
  form: UseFormReturn<any>;
}) => {
  const onSubmit = (data: any) => {
    // eslint-disable-next-line no-console
    console.log('Form submitted:', data);
    alert('Formulario enviado! Revisa la consola para ver los datos');
  };

  const { errors } = form.formState.errors;

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <Stack spacing={3}>
          <Stack spacing={2}>{children}</Stack>

          <Stack sx={{ alignSelf: 'flex-start', gap: 2, flexDirection: 'row' }}>
            <Button
              variant="primary"
              type="submit"
            >
              Enviar
            </Button>
          </Stack>
        </Stack>
        <Stack
          component="details"
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.elements.default,
            borderRadius: 2,
            mt: 2,
            p: 2,
          }}
        >
          <Typography
            variant="globalXS"
            component={'summary'}
            sx={{ cursor: 'pointer' }}
          >
            Form values:
          </Typography>
          <Stack
            component="pre"
            sx={{
              fontSize: 12,
              maxHeight: 300,
              overflow: 'auto',
              backgroundColor: theme =>
                theme.palette.new.action.background.neutral.hover,
              borderRadius: 2,
              p: 2,
              border: '1px solid #ddd',
              margin: 0,
              mt: 2,
            }}
          >
            {JSON.stringify(form.watch(), null, 2)}
          </Stack>
        </Stack>
        {errors && Object.values(errors).length > 0 && (
          <Stack
            component="details"
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.feedback.error,
              borderRadius: 2,
              mt: 2,
              p: 2,
            }}
          >
            <Typography
              variant="globalXS"
              component={'summary'}
              sx={{ cursor: 'pointer' }}
            >
              Form errors:
            </Typography>
            <Stack
              component="pre"
              sx={{
                fontSize: 12,
                maxHeight: 300,
                overflow: 'auto',
                backgroundColor: theme =>
                  theme.palette.new.background.feedback.error,
                borderRadius: 2,
                p: 2,
                border: theme =>
                  `1px solid ${theme.palette.border?.errorBorder}`,
                margin: 0,
                mt: 2,
              }}
            >
              {JSON.stringify(errors, null, 2)}
            </Stack>
          </Stack>
        )}
      </form>
    </FormProvider>
  );
};

export default FormWrapper;