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

export default function (props: {
  fileStateSet: Dispatch<SetStateAction<FileList | null>>;
  isTerminated: boolean;
  setIsTerminated: Dispatch<SetStateAction<boolean>>;
}) {
  const inputSelectorProps = useMultiStyleConfig("Button", {
    colorScheme: "blue",
  });

  return (
    <>
      <FormControl isRequired>
        <FormLabel>
          Is the account you are transferring from terminated?
        </FormLabel>
        <RadioGroup
          onChange={(v) => props.setIsTerminated(JSON.parse(v))}
          value={JSON.stringify(props.isTerminated)}
        >
          <Stack>
            <Radio value="true">Yes</Radio>
            <Radio value="false">No</Radio>
          </Stack>
        </RadioGroup>
      </FormControl>
      {props.isTerminated ? (
        <FormControl isRequired>
          <FormLabel>Proof of Termination</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"
          />
        </FormControl>
      ) : null}
    </>
  );
}