import {
  FormControl,
  FormHelperText,
  FormLabel,
  Input,
  useMultiStyleConfig,
} from "@chakra-ui/react";
import { type Dispatch, type SetStateAction } from "react";

export default function (props: {
  fileStateSet: Dispatch<SetStateAction<FileList | null>>;
}) {
  const inputSelectorProps = useMultiStyleConfig("Button", {
    colorScheme: "blue",
  });
  return (
    <FormControl isRequired>
      <FormLabel>Proof of Purchase</FormLabel>
      <Input
        accept="image/*"
        border="none"
        multiple={true}
        onChange={(e) => {
          props.fileStateSet(e.target.files);
        }}
        sx={{
          "::file-selector-button": {
            border: "none",
            outline: "none",
            ...inputSelectorProps,
          },
        }}
        type="file"
      />
      <FormHelperText>
        Select both the Roblox transaction entry and proof of you not receiving
        your purchase.
      </FormHelperText>
    </FormControl>
  );
}