import { EpicFile, EpicFileRef } from "epic-file-react";

const EpicfileRef = createRef<EpicFileRef>();
const [Layout, setLayout] = useState("Primary" as "Primary" | "Secondary");
const [Theme, setTheme] = useState("Light" as "Light" | "Dark");
const [Rounded, setRounded] = useState(false);
const [Mini, setMini] = useState(false);
const [Micro, setMicro] = useState(false);

<EpicFile
  ref={EpicfileRef}
  theme={Theme}
  layout={Layout}
  mini={Mini}
  micro={Micro}
  rounded={Rounded}
  multiple={true}
  instantUpload={false}
  limit={3}
  size={1e6}
  accept={["image/png", "image/jpeg"]}
  enableImagePreview={true}
  imagePreviewCover={true}
  server={{
    host: "http://localhost:8080/v1/",
    upload: {
      endpoint: "uploads/",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7InVzZXJJZCI6IkFkbWluaXN0cmF0b3IiLCJmbmFtZSI6Ik11aGFtbWFkIiwibG5hbWUiOiJKZWxiYW4ifSwidHlwZSI6IkF1dGhvcml6YXRpb24iLCJhbGxvd2VkSXBzIjpbIjo6MSJdLCJtb2RlIjoibGl2ZSIsInZlcnNpb24iOjEsImlkIjo0ODkxMTc0MTUzOTkyMjQ5LCJpYXQiOjE2MTQwODc0NzAsImV4cCI6MTYxNDE3Mzg3MH0.G2XUc87t4eQ1-F6ywXAs9qFOmnHzEv3_tRjuo3gcLeg",
      },
    },
    revert: {
      endpoint: "uploads/{reference}",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7InVzZXJJZCI6IkFkbWluaXN0cmF0b3IiLCJmbmFtZSI6Ik11aGFtbWFkIiwibG5hbWUiOiJKZWxiYW4ifSwidHlwZSI6IkF1dGhvcml6YXRpb24iLCJhbGxvd2VkSXBzIjpbIjo6MSJdLCJtb2RlIjoibGl2ZSIsInZlcnNpb24iOjEsImlkIjo0ODkxMTc0MTUzOTkyMjQ5LCJpYXQiOjE2MTQwODc0NzAsImV4cCI6MTYxNDE3Mzg3MH0.G2XUc87t4eQ1-F6ywXAs9qFOmnHzEv3_tRjuo3gcLeg",
      },
    },
  }}
  onAdd={(file) => {
    console.log("Added File::", file.name);
  }}
  onUpload={(
    _file,
    response: { status: boolean; data: { uploadId: string } }
  ) => {
    if (response.status) return response.data.uploadId;
    else throw new Error("File Not Uploaded!");
  }}
  onRemove={(file) => {
    console.log("Removed File::", file.name);
  }}
/>;