import { cn } from '@/lib/utils';
import { Form } from 'antd';
import React, { ReactNode } from 'react';
import {
  Controller,
  FieldValues,
  FormProvider,
  useFormContext,
  UseFormReturn,
} from 'react-hook-form';
import { makeStyles } from 'tss-react/mui';

const useStyles = makeStyles()(() => ({
    form: {
      '& .ant-form-item-label': {
        padding: '0 !important'
      },
      '& .ant-form-item-row': {
        // flexDirection: 'row !important' as any
      }
    },
    logo: {
      maxWidth: '100%',
      maxHeight: '160px',
    },
}));

interface FormWrapperProps<TFieldValues extends FieldValues = FieldValues> {
  children: ReactNode;
  layout: 'horizontal' | 'vertical' | 'inline';
  className?: string;
  form: UseFormReturn<TFieldValues>;
  onSubmit: (data: TFieldValues) => void;
  onKeyDown?: (event: React.KeyboardEvent<HTMLFormElement>) => void;
}

interface FormItemProps {
  children: unknown;
  label?: ReactNode;
  name: string;
  className?: string;
  row ?: boolean;
  styles?: React.CSSProperties; 
  hiddenLabel?: boolean;
}

const { Item } = Form;
export function FormWrapper<TFieldValues extends FieldValues = FieldValues>({
  children,
  layout,
  form,
  onSubmit,
  className,
  onKeyDown,
}: FormWrapperProps<TFieldValues>) {
  const { classes } = useStyles();
  return (
    <FormProvider {...form}>
      <Form
        layout={layout}
        onFinish={form.handleSubmit(onSubmit)}
        onKeyDown={onKeyDown}
        className={cn(className, classes.form)}
      >
        {children}
      </Form>
    </FormProvider>
  );
}

export function FormItem({ children, label, name, className, row, styles, hiddenLabel }: FormItemProps) {
  const { control } = useFormContext(); // This uses the form context from the parent FormWrapper
  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <Item
          // label={label}
          validateStatus={error ? 'error' : ''}
          help={error?.message}
          className={cn(className)}
          style={styles}
          // labelCol={row ? { span: 6 } : undefined}
          // wrapperCol={row ? { span: 18 } : undefined}
        >
          <div className={cn(row ? 'flex items-center gap-4' : 'flex flex-col')}>
            {label || hiddenLabel && (
              <label className="text-sm font-medium whitespace-nowrap pt-1 min-w-fit min-h" style={{ opacity: hiddenLabel ? 0 : 1 }}>
                {label || 'label'}
              </label>
            )}
            <div className="flex-1">
              {typeof children === 'function'
                ? children(field)
                : React.isValidElement(children)
                ? React.cloneElement(children, field)
                : children}
            </div>
          </div>
        </Item>
      )}
    />
  );
}