// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { MessageBar } from "@coreai-ds/react-components";
import { MessageBarBody } from "@coreai-ds/react-components";
import { MessageBarTitle } from "@coreai-ds/react-components";
import { FileUpload } from "@coreai-ds/react-components";
import { DocumentArrowUp24Regular } from "@fluentui/react-icons";
import { Text } from "@coreai-ds/react-components";

export const CustomDropZoneContent = () => {
    const maxFileSize = 5 * 1024 * 1024;
    const instructionsId = React.useId();
    const errorId = React.useId();
    const [selectedFile, setSelectedFile] = React.useState<File>();
    const [error, setError] = React.useState<string>();
    const styles = /* css */ `
      .file-upload-custom-content-example {
        display: flex;
        flex-direction: column;
        max-width: 720px;
        padding: var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalL);
      }

      .file-upload-custom-content-example__drop-zone {
        align-items: center;
        background-color: var(--colorBrandBackground2);
        border: var(--strokeWidthThin) solid var(--colorBrandStroke1);
        min-height: 180px;
        padding: var(--spacingVerticalXXL);
      }

      .file-upload-custom-content-example__drop-zone:hover {
        background-color: var(--colorBrandBackground2Hover);
      }

      .file-upload-custom-content-example__drop-zone:active {
        background-color: var(--colorBrandBackground2Pressed);
      }

      .file-upload-custom-content-example__upload-icon {
        margin-bottom: var(--spacingVerticalXXS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="file-upload-custom-content-example">
          {error ? (<MessageBar id={errorId} intent="error">
              <MessageBarBody>
                <MessageBarTitle>Unable to add file</MessageBarTitle>
                {error}
              </MessageBarBody>
            </MessageBar>) : null}

          <FileUpload ariaLabel={selectedFile ? 'Replace knowledge file' : 'Select a knowledge file'} ariaDescribedBy={error ? `${instructionsId} ${errorId}` : instructionsId} accept={{
            'application/pdf': ['.pdf'],
            'text/plain': ['.txt'],
            'text/markdown': ['.md'],
        }} className="file-upload-custom-content-example__drop-zone" maxSize={maxFileSize} multiple={false} onDropAccepted={(added) => {
            setError(undefined);
            setSelectedFile(added[0]);
        }} onDropRejected={(rejections) => setError(rejections
            .map(({ file, errors }) => `${file.name}: ${errors.map(({ message }) => message).join(', ')}`)
            .join('; '))}>
            <DocumentArrowUp24Regular aria-hidden className="file-upload-custom-content-example__upload-icon"/>
            <Text preset="heading5">
              {selectedFile ? selectedFile.name : 'Select a knowledge file'}
            </Text>
            <Text foreground={3} preset="bodyS">
              {selectedFile
            ? 'Drop another file or click to replace this selection'
            : 'Drop a product guide or click to browse'}
            </Text>
            <Text foreground={3} preset="bodyS">
              PDF, TXT, or Markdown · Max 5 MB
            </Text>
          </FileUpload>
        </div>
      </>);
};

export default CustomDropZoneContent;