import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { useForm } from '@tanstack/react-form';
import { z } from 'zod';
import { FieldError } from './field-error';
import './index.css';

interface Role {
  external: External;
  name: string;
}

interface Person {
  name: string;
  age: number;
  roles: Record<string, Role>;
}

enum External {
  True = 'true',
  False = 'false',
}

const defaultPerson: Person = {
  name: 'John Doe',
  age: 30,
  roles: {
    Admin: {
      name: 'Admin',
      external: External.False,
    },
    User: {
      name: 'User',
      external: External.False,
    },
  },
};

const roles: Record<string, Role> = {
  Admin: {
    name: 'Admin',
    external: External.False,
  },
  User: {
    name: 'User',
    external: External.False,
  },
};

function App() {
  const form = useForm({
    defaultValues: defaultPerson,
    onSubmit({ value }) {
      alert(JSON.stringify(value));
    },
  });

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <form.Field
          name="roles"
          mode="array"
          validators={{
            onChange: z.record(
              z.object({
                external: z.nativeEnum(External, {
                  required_error: 'role.external is required',
                }),
                name: z.string({ required_error: 'role.name is required' }),
              })
            ),
          }}
        >
          {(field) => {
            return (
              <>
                {Object.entries(roles).map(([roleName, role], idx) => (
                  <React.Fragment key={idx}>
                    <form.Field name={`roles.${roleName}.name`}>
                      {(subField) => (
                        <div className="checkbox">
                          <label htmlFor={`input-${idx}`}>{roleName}</label>
                          <input
                            className="switch"
                            id={`input-${idx}`}
                            type="checkbox"
                            checked={Reflect.has(field.state.value, subField.state.value)}
                            name={subField.state.value}
                            onBlur={subField.handleBlur}
                            onChange={(event) => {
                              const currentFieldValue = field.state.value;
                              console.log(currentFieldValue, role.name, role);
                              if (event.target.checked) {
                                const newValue = {
                                  ...currentFieldValue,
                                  [role.name]: role,
                                }
                                console.log(newValue)
                                field.setValue(newValue);
                              } else {
                                const newValue = Object.fromEntries(
                                  Object.entries(currentFieldValue).filter(
                                    ([key]) => key !== role.name
                                  )
                                );
                                console.log(newValue);
                                field.setValue(newValue);
                              }
                            }}
                            value={role.name}
                          />
                        </div>
                      )}
                    </form.Field>
                  </React.Fragment>
                ))}
                <FieldError field={field} />
              </>
            );
          }}
        </form.Field>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button
              type="submit"
              disabled={!canSubmit}
              className="submit-button"
            >
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        />
        <form.Subscribe selector={(state) => state.values}>
          {(values) => (
            <>
              <button
                type="button"
                className="submit-button"
                style={{ marginLeft: '8px' }}
                onClick={() => {
                  console.log(values);
                }}
              >
                Log
              </button>
              <pre style={{ marginBottom: '1rem' }}>
                <code>{JSON.stringify(values, null, 4)}</code>
              </pre>
            </>
          )}
        </form.Subscribe>
      </form>
    </div>
  );
}

const rootElement = document.getElementById('root')!;

createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);