"use client";
import {
  siteProps,
  btnType,
  radioDual,
  linkBtn,
  DefaultInputProps,
  InputNumberProps,
} from "../types";
export function FormInput({
  type,
  id,
  label,
  require,
  value,
  onChange,
}: siteProps) {
  return (
    <div className="relative z-0 mt-4 w-full">
      <input
        type={type}
        id={id}
        name={id}
        value={value}
        onChange={onChange}
        className="peer text-md block w-full appearance-none border-0 border-b-1 border-gray-400 bg-transparent px-0 py-2 font-semibold text-slate-950 focus:border-slate-950 focus:ring-0 focus:outline-none"
        placeholder=""
        autoComplete="new-input"
        required={require}
      />
      <label
        htmlFor={id}
        className="absolute top-3 z-10 origin-[0] -translate-y-6 scale-100 transform text-sm font-medium text-gray-800 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-100 peer-focus:text-gray-800"
      >
        {require ? <>*{label}</> : <>{label}</>}
      </label>
    </div>
  );
}
export function InputDefault({
  type,
  id,
  label,
  require,
  placeholder,
}: DefaultInputProps) {
  return (
    <div className="relative flex w-full flex-col gap-1 border-1 border-gray-950/25 px-6 pt-4 pb-2">
      <label htmlFor={id} className="flex justify-start text-xs font-medium">
        {require ? <>*{label}</> : <>{label}</>}
      </label>
      <input
        type={type}
        id={id}
        name={id}
        className="peer text-md block w-full appearance-none py-1 font-semibold text-slate-950 placeholder:text-sm placeholder:font-normal focus:border-slate-950 focus:ring-0 focus:outline-none"
        placeholder={placeholder}
        autoComplete="new-input"
        required={require}
      />
    </div>
  );
}

export function FormInputCode({ id, label }: siteProps) {
  return (
    <div className="relative z-0 mt-4">
      <input
        type="number"
        id={id}
        name={id}
        className="peer text-md block w-full appearance-none border-0 border-b-1 border-gray-400 bg-transparent px-0 py-2 font-semibold tracking-[2] text-slate-950 focus:border-slate-950 focus:ring-0 focus:outline-none"
        placeholder=" "
        autoComplete="new_code"
      />
      <label
        htmlFor={id}
        className="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-100 transform text-sm font-medium text-gray-800 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-100 peer-focus:text-gray-800"
      >
        {label}
      </label>
    </div>
  );
}
export function FormOTPCode({ id, label, value, onChange }: siteProps) {
  return (
    <div className="relative z-0 mt-8">
      <input
        type="number"
        id={id}
        className="peer text-md block w-full appearance-none border-0 border-b-1 border-gray-400 bg-transparent px-0 py-2 font-semibold tracking-[8] text-slate-950 focus:border-slate-950 focus:ring-0 focus:outline-none"
        placeholder=" "
        required
        value={value}
        onChange={onChange}
        autoComplete="new_otp"
      />
      <label
        htmlFor={id}
        className="absolute top-3 -z-10 origin-[0] -translate-y-6 scale-100 transform text-sm font-medium text-gray-800 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-100 peer-focus:text-gray-800"
      >
        {label}
      </label>
    </div>
  );
}
export function FormButton({
  id,
  label,
  color,
  hairline,
  type,
  onClick,
  disabled,
}: btnType & {
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
}) {
  return (
    <div
      className={`btn-dual-style mt-4 btn-${color} hover-${hairline} ${
        disabled ? "cursor-not-allowed" : ""
      }`}
    >
      <span className={`${hairline}`}></span>
      <button
        id={id}
        type={type}
        name={id}
        onClick={onClick}
        disabled={disabled}
        className={`px-4 py-2 ${
          disabled ? "bg-gray-600 cursor-not-allowed text-white/50" : ""
        }`}
      >
        {label}
      </button>
    </div>
  );
}

export function LinkButton({ id, label, href, color, hairline }: linkBtn) {
  return (
    <div className={`btn-dual-style btn-${color} hover-${hairline}`}>
      <span className={`${hairline}`}></span>
      <a id={id} href={href}>
        {label}
      </a>
    </div>
  );
}

export function FormCheckBox({ id, label, value, onChange }: siteProps) {
  return (
    <div className="mt-4 flex gap-3">
      <div className="flex h-6 shrink-0 items-center">
        <div className="group grid size-5 grid-cols-1">
          <input
            checked={value === "true"}
            onChange={onChange}
            id={id}
            name={id}
            type="checkbox"
            aria-describedby="checkbox"
            className="col-start-1 row-start-1 appearance-none border-2 border-gray-950 checked:bg-gray-950"
          />
          <span className="pointer-events-none col-start-1 row-start-1 ml-0.75 size-5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25">
            <i className="icon-[iconamoon--check-bold] text-white opacity-0 group-has-[:checked]:opacity-100"></i>
            <i className="icon-[iconamoon--check-bold] text-white opacity-0 group-has-[:indeterminate]:opacity-100"></i>
          </span>
        </div>
      </div>
      <label htmlFor={id} className="text-xs text-gray-950">
        {label}
      </label>
    </div>
  );
}

export function FormRadioBtn({ id, name, label }: siteProps) {
  return (
    <div className="mr-4 flex rounded-sm py-2">
      <div className="flex h-5 items-center">
        <input
          id={id}
          type="radio"
          value=""
          name={name}
          className="h-4 w-4 cursor-pointer rounded-full border-1 border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-800 duration-400 peer-checked:bg-gray-950 peer-checked:text-white peer-hover:border-gray-500 peer-hover:bg-gray-100 hover:border-gray-600 peer-checked:hover:bg-gray-950"
        />
      </div>
      <div className="ms-2">
        <label htmlFor={id} className="text-md font-medium text-gray-950">
          {label}
        </label>
      </div>
    </div>
  );
}
export function FormRadioDualBtn({
  id,
  name,
  label,
  description,
  onChange,
}: radioDual) {
  return (
    <div className="relative flex items-start">
      <div className="flex h-6 items-center pt-1">
        <input
          id={id}
          name={name}
          type="radio"
          onChange={onChange}
          className="relative size-5 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-gray-950 checked:bg-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
        />
      </div>
      <div className="ms-2">
        <label htmlFor={id}>
          <p className="font-macropolo text-xl font-medium tracking-wider text-gray-950 uppercase">
            {label}
          </p>
          <p className="text-xs font-normal text-gray-600">{description}</p>
        </label>
      </div>
    </div>
  );
}

export function FormMobileNuber({
  id,
  label,
  placeholder,
  name,
  value,
  onChange,
  countryCode,
  onCountryChange,
}: {
  id: string;
  label: string;
  placeholder: string;
  name: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  countryCode: string;
  onCountryChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}) {
  return (
    <div className="mt-8">
      <label htmlFor={id} className="block text-sm font-medium text-gray-800">
        {label}
      </label>
      <div className="mt-1 flex border-0 border-b-1 border-gray-400 outline-0 has-[input:focus-within]:border-gray-800">
        <div className="relative flex w-25 flex-row items-center justify-between">
          <select
            id={`${id}_country`}
            name={`${name}_country`}
            value={countryCode}
            onChange={onCountryChange}
            className="w-full appearance-none py-1.5 text-base font-bold text-gray-800 placeholder:text-gray-400 focus:outline-0 sm:text-sm"
          >
            <option value="+1">US</option>
            <option value="+1">CA</option>
            <option value="+44">EU</option>
            <option value="+91">IN</option>
          </select>
          <span className="absolute top-1.5 right-0">
            <i className="icon-[iconamoon--arrow-down-2-duotone]"></i>
          </span>
        </div>
        <input
          id={id}
          name={id}
          value={value}
          onChange={onChange}
          type="number"
          placeholder={placeholder}
          autoComplete="new_mobile"
          className="flex w-full pl-10 text-base font-bold tracking-[8] text-gray-950 placeholder:text-base placeholder:font-medium placeholder:-tracking-normal placeholder:text-gray-800 focus:outline-none sm:text-sm"
        />
      </div>
    </div>
  );
}

export function InputNumberOnly({
  id,
  label,
  min,
  max,
  require,
  placeholder,
  value,
  onChange,
}: InputNumberProps) {
  return (
    <div className="relative flex w-full flex-col gap-1 border-1 border-gray-950/25 px-6 pt-4 pb-2">
      <label htmlFor={id} className="flex justify-start text-xs font-medium">
        {require ? <>*{label}</> : <>{label}</>}
      </label>
      <input
        type="number"
        id={id}
        name={id}
        min={min}
        max={max}
        value={value}
        className="peer text-md block w-full appearance-none py-1 font-semibold text-slate-950 placeholder:text-sm placeholder:font-normal focus:border-slate-950 focus:ring-0 focus:outline-none"
        placeholder={placeholder}
        autoComplete="new-input"
        required={require}
      />
    </div>
  );
}