import * as React from "react";
import TextField from "@mui/material/TextField";

export interface InputProps {
  id?: string;
  disabled?: boolean;
  required?: boolean;
  name: string;
  value?: string;
  error?: boolean;
  helperText?: string;
  onChange?: (...a: any[]) => any;
  onBlur?: (...a: any[]) => any;
  isConfirm?: boolean;
}

interface CheckboxProps {
  id?: string;
  name: string;
  value: boolean;
  onChange?: (...a: any[]) => any;
  label?: string;
}

export function Label(
  props: React.PropsWithChildren<{ htmlFor: string; content: string }>,
) {
  return (
    <label
      htmlFor={props.htmlFor}
      className="block text-sm font-medium text-gray-700"
    >
      {props.content}
    </label>
  );
}

export function Email(props: React.PropsWithChildren<InputProps>) {
  return (
    <TextField
      label="Email"
      name={props.name}
      autoFocus
      type="email"
      autoComplete="email"
      required
      disabled={props.disabled}
      helperText={props.helperText}
      variant="outlined"
      error={props.error}
      className="w-full"
      onChange={props.onChange}
      onBlur={props.onBlur}
      id={props.id}
    />
  );
}

export function Text(props: React.PropsWithChildren<InputProps>) {
  return (
    <input
      id={props.name}
      name={props.name}
      type="text"
      value={props.value}
      onChange={props.onChange}
      required={props.required}
      disabled={props.disabled}
      className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
    />
  );
}

export function Password(props: React.PropsWithChildren<InputProps>) {
  return (
    <TextField
      label={props.isConfirm ? "Password Confirm" : "Password"}
      name={props.name}
      type="password"
      autoComplete="password"
      required
      disabled={props.disabled}
      helperText={props.helperText}
      variant="outlined"
      error={props.error}
      className="w-full"
      onChange={props.onChange}
      onBlur={props.onBlur}
      id={props.id}
    />
  );
}

export function LogoutButton(
  props: React.PropsWithChildren<InputProps & { onClick: () => void }>,
) {
  return (
    <button
      disabled={props.disabled}
      type="submit"
      id={props.id}
      name={props.name}
      onClick={props.onClick}
      className="flex w-full justify-center rounded-md border border-transparent bg-red-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
    >
      Logout
    </button>
  );
}

export function CheckBox(props: React.PropsWithChildren<CheckboxProps>) {
  return (
    <div className="flex items-center mr-4">
      <input
        checked={props.value}
        onChange={props.onChange}
        id={props.id}
        type="checkbox"
        className="w-4 h-4  rounded   focus:ring-2 accent-indigo-500 bg-grey-700"
      />
      <label
        htmlFor="red-checkbox"
        className="ml-2 text-sm font-medium text-black"
      >
        {props.label}
      </label>
    </div>
  );
}
