const textClassification = {
  label: "block text-sm font-medium text-gray-700 formkit-invalid:text-red-500",
  wrapper: "flex flex-col gap-4",
  inner:
    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary focus-within:shadow-sm w-full sm:max-w-lg transition-all",
  input:
    "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm",
};

const boxClassification = {
  label: textClassification.label,
  legend: `${textClassification.label} px-2`,
  fieldset:
    "group border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg",
  wrapper:
    "flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
  help: "mb-2 mt-0 px-2",
  input:
    "form-check-input h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200",
  inner: "flex items-center",
};

const buttonClassification = {
  wrapper: "mb-1",
  input:
    "bg-blue-500 hover:bg-blue-700 text-white text-sm font-normal py-3 px-5 rounded",
};

const theme: Record<string, Record<string, string>> = {
  global: {
    form: "divide-y divide-gray-100",
    outer:
      "formkit-disabled:opacity-50 py-4 first:pt-0 last:pb-0 transition-all",
    help: "text-xs mt-2 text-gray-500",
    messages: "list-none p-0 mt-1.5 mb-0 transition-all",
    message: "text-red-500 mt-2 text-xs",
  },
  button: buttonClassification,
  color: {
    ...textClassification,
    inner: "",
    input:
      "w-16 h-8 appearance-none cursor-pointer border border-gray-300 rounded-md mb-2 p-1",
  },
  file: {
    ...textClassification,
    noFiles: "block text-gray-800 text-sm mb-1",
    fileItem: "block flex text-gray-800 text-sm mb-1",
    fileRemove: "ml-auto text-blue-500 text-sm",
  },
  checkbox: boxClassification,
  radio: {
    ...boxClassification,
    input: boxClassification.input.replace("rounded-sm", "rounded-full"),
  },
  range: {
    ...textClassification,
    inner: "w-full sm:max-w-lg",
    input:
      "form-range appearance-none w-full h-2 p-0 bg-gray-200 rounded-full focus:outline-none focus:ring-0 focus:shadow-none",
  },
  search: textClassification,
  select: textClassification,
  submit: buttonClassification,
  tel: textClassification,
  text: textClassification,
  time: textClassification,
  url: textClassification,
  week: textClassification,
  month: textClassification,
  number: textClassification,
  password: textClassification,
  email: textClassification,
  date: textClassification,
  "datetime-local": textClassification,
  textarea: {
    ...textClassification,
    inner: textClassification.inner.replace("h-9", "h-full"),
    input:
      textClassification.input.replace("resize-none", "resize-y") + " py-2",
  },
  repeater: {
    label: textClassification.label,
    legend: `${textClassification.label} px-2`,
    fieldset: boxClassification.fieldset,
    wrapper: boxClassification.wrapper,
    help: boxClassification.wrapper,
    inner: "flex flex-col gap-4",
    items: "flex flex-col w-full gap-2",
    item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-hidden focus-within:shadow-sm",
    content: "flex-1 p-2 col-span-11",
    controls: "bg-gray-200 col-span-1 flex items-center justify-center",
  },
  tagSelect: {
    ...textClassification,
    inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
    input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
    "post-tags-wrapper": "flex w-full items-center",
    "post-tags": "flex w-full flex-wrap items-center",
    "post-tag-wrapper": "inline-flex items-center p-1",
    "post-tag-close":
      "h-4 w-4 cursor-pointer text-gray-600 hover:text-gray-900",
    "post-tags-button": "inline-flex h-full cursor-pointer items-center px-1",
    "dropdown-wrapper":
      "absolute ring-1 ring-white top-full bottom-auto right-0 z-10 mt-1 max-h-96 w-full overflow-auto rounded bg-white shadow-lg",
  },
  categorySelect: {
    ...textClassification,
    inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
    input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
    "post-categories-wrapper": "flex w-full items-center",
    "post-categories": "flex w-full flex-wrap items-center",
    "post-categories-button":
      "inline-flex h-full cursor-pointer items-center px-1",
    "dropdown-wrapper":
      "absolute ring-1 ring-white top-full bottom-auto right-0 z-10 mt-1 max-h-96 w-full overflow-auto rounded bg-white shadow-lg",
  },
};

export default theme;