"use client";

import cx from "classnames";
import type { FC } from "react";
import React from "react";
import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
import FileStatic from "./File.static";

const CLASS_ROOT = "file-input";

export type FileSize = "default" | "large";

// Omit native 'size' prop to avoid conflict
export interface FileProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  /** Html id attribute. Generated automatically if omitted. */
  id?: string;
  /** Disabled state. */
  isDisabled?: boolean;
  /** Invalid state */
  isInvalid?: boolean;
  /** Input name. */
  name?: string;
  /** Size of element. */
  size?: FileSize;
  className?: string;
}

const defaultSize: FileSize = "default";

const File: FC<FileProps> = ({
  id,
  isDisabled,
  isInvalid,
  name,
  size = defaultSize,
  className,
  ...other
}) => {
  const [ref] = useStatic(FileStatic);

  const currentId = useHydrationSafeId(id);

  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${size}`]: size !== defaultSize,
    },
    className,
  );

  return (
    <div className={classes} data-file-input ref={ref}>
      <input
        className={`${CLASS_ROOT}__control`}
        id={currentId}
        name={name || id}
        disabled={isDisabled}
        type="file"
        {...other}
      />
      <label
        // @ts-expect-error: custom prop for styling
        size={size}
        htmlFor={currentId}
        aria-hidden="true"
        className={`${CLASS_ROOT}__button`}
      >
        Vybrať súbor
      </label>
      <ul className={`${CLASS_ROOT}__files`} />
    </div>
  );
};

File.displayName = "File";

export { File };