import {NextPage} from 'next';
import * as React from 'react';
//import * as BlobReact from '@tesseract-design/web-blob-react';
import * as BlobBase from '@tesseract-design/web-base-blob';
import * as ButtonBase from '@tesseract-design/web-base-button';
import Prism from 'prismjs';
import WaveSurfer from 'wavesurfer.js';
import {formatFileSize, formatNumeral, formatSecondsDuration} from '../../../utils/numeral';
import {
  ContentType,
  getContentType,
  getMimeTypeDescription,
  readAsArrayBuffer,
  readAsDataURL,
  readAsText,
} from '../../../utils/blob';
import {getImageMetadata} from '../../../utils/image';
import {getAudioMetadata} from '../../../utils/audio';
import {getTextMetadata} from '../../../utils/text';
import {delegateTriggerChangeEvent} from '../../../utils/event';

interface FileWithPreview extends File {
  metadata?: Record<string, string | number | ArrayBuffer>;
  internal?: Record<string, unknown>;
}

export interface FileButtonProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style' | 'label' | 'list'> {
  /**
   * Should the component display a border?
   */
  border?: boolean,
  /**
   * Should the component occupy the whole width of its parent?
   */
  block?: boolean,
  /**
   * Short textual description indicating the nature of the component's value.
   */
  label?: React.ReactNode,
  /**
   * Short textual description as guidelines for valid input values.
   */
  hint?: React.ReactNode,
  enhanced?: boolean,
  /**
   * Is the label hidden?
   */
  hiddenLabel?: boolean,
}

const augmentTextFile = async (f: File) => {
  const contents = await readAsText(f);
  const metadata = getTextMetadata(contents, f.name);
  return {
    ...f,
    name: f.name,
    type: f.type,
    size: f.size,
    lastModified: f.lastModified,
    metadata: {
      contents,
      language: metadata.language,
      languageProbability: metadata.languageProbability,
      scheme: metadata.scheme,
      schemeTitle: metadata.schemeTitle,
    },
  };
}

const augmentImageFile = async (f: File) => {
  const previewUrl = await readAsDataURL(f);
  const imageMetadata = await getImageMetadata(previewUrl);
  return {
    name: f.name,
    type: f.type,
    size: f.size,
    lastModified: f.lastModified,
    metadata: {
      previewUrl,
      width: imageMetadata.naturalWidth,
      height: imageMetadata.naturalHeight,
    },
  };
};

const augmentAudioFile = async (f: File) => {
  const previewUrl = await readAsDataURL(f);
  const audioExtensions = await getAudioMetadata(previewUrl);
  return {
    name: f.name,
    type: f.type,
    size: f.size,
    lastModified: f.lastModified,
    metadata: {
      previewUrl,
      duration: audioExtensions.duration,
    },
  };
};

const augmentBinaryFile = async (f: File) => {
  const arrayBuffer = await readAsArrayBuffer(f);
  return {
    name: f.name,
    type: f.type,
    size: f.size,
    lastModified: f.lastModified,
    metadata: {
      contents: arrayBuffer,
    },
  }
};

const augmentVideoFile = async (f: File) => {
  const previewUrl = await readAsDataURL(f);
  return {
    name: f.name,
    type: f.type,
    size: f.size,
    lastModified: f.lastModified,
    metadata: {
      previewUrl,
    },
  };
}

const CONTENT_TYPE_AUGMENT_FUNCTIONS: Record<ContentType, Function> = {
  [ContentType.TEXT]: augmentTextFile,
  [ContentType.IMAGE]: augmentImageFile,
  [ContentType.AUDIO]: augmentAudioFile,
  [ContentType.VIDEO]: augmentVideoFile,
  [ContentType.BINARY]: augmentBinaryFile,
};

const useFilePreviews = (fileList?: FileList) => {
  const [selectedFiles, setSelectedFiles] = React.useState([] as Partial<FileWithPreview>[]);
  React.useEffect(() => {
    const loadFilePreviews = async (fileList: FileList) => {
      const files = Array.from(fileList);
      return Promise.all(
        files.map(async (f) => {
          const contentType = getContentType(f.type, f.name);
          const { [contentType]: augmentFunction } = CONTENT_TYPE_AUGMENT_FUNCTIONS;

          if (!augmentFunction) {
            return f;
          }

          const augmentedFile = await augmentFunction(f);
          if (contentType === ContentType.TEXT && augmentedFile.metadata.scheme) {
            await import(`prismjs/components/prism-${augmentedFile.metadata.scheme}`);
          }
          return augmentedFile;
        })
      );
    }

    if (fileList) {
      loadFilePreviews(fileList).then((fileResult) => {
        setSelectedFiles(fileResult);
      });
    }
  }, [fileList]);

  return React.useMemo(() => ({
    files: selectedFiles,
  }), [selectedFiles]);
}

const FilePreview = ({
  fileList: fileList,
}: { fileList?: FileList }) => {
  const { files } = useFilePreviews(fileList);
  const mediaContainerRef = React.useRef<HTMLDivElement>(null);
  const mediaControllerRef = React.useRef<WaveSurfer | HTMLVideoElement>(null);
  const [isPlaying, setIsPlaying] = React.useState(false);

  const playMedia = () => {
    if (files.length < 1) {
      return;
    }

    setIsPlaying((p) => !p);
  };

  React.useEffect(() => {
    const { current: mediaController } = mediaControllerRef;
    if (!mediaController) {
      return;
    }

    if (isPlaying) {
      void mediaController.play();
      return
    }
    mediaController.pause();
  }, [isPlaying]);

  React.useEffect(() => {
    if (files.length < 1) {
      return;
    }

    const [theFile] = files;
    const contentType = getContentType(theFile.type, theFile.name);
    if (
      contentType === ContentType.AUDIO
      && typeof theFile.metadata?.previewUrl === 'string'
      && mediaContainerRef.current !== null
    ) {
      mediaContainerRef.current.innerHTML = '';

      const mediaControllerRefMutable = mediaControllerRef as React.MutableRefObject<WaveSurfer>;
      mediaControllerRefMutable.current = WaveSurfer.create({
        container: mediaContainerRef.current,
        url: theFile.metadata.previewUrl,
        cursorWidth: 0,
        height: mediaContainerRef.current.offsetHeight,
        barWidth: 2,
        barGap: 2,
        barRadius: 1,
      });

      mediaControllerRefMutable.current.on('finish', () => {
        setIsPlaying(false);
        mediaControllerRefMutable.current.seekTo(0);
      });
    } else if (
      contentType === ContentType.VIDEO
      && typeof theFile.metadata?.previewUrl === 'string'
    ) {
      (mediaControllerRef.current as HTMLVideoElement).addEventListener('ended', (e) => {
        const videoElement = e.currentTarget as HTMLVideoElement;
        setIsPlaying(false);
        videoElement.currentTime = 0;
      });
    }

    return () => {
      if (mediaControllerRef && mediaControllerRef.current && mediaControllerRef.current instanceof WaveSurfer) {
        mediaControllerRef.current.destroy();
      }
    }
  }, [files, mediaContainerRef, mediaControllerRef]);

  if (files.length < 1) {
    return null;
  }

  const f = files[0];
  const contentType = getContentType(f.type, f.name);

  return (
    <div
      className={`w-full h-full`}
    >
      <div data-testid="selectedFileItem" className={`h-full w-full p-4 box-border rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10`}>
        {
          contentType === ContentType.TEXT
          && (
            <div className="flex gap-4 w-full h-full relative">
              <div className={`h-full w-1/3 flex-shrink-0`}>
                {
                  typeof f.metadata?.contents === 'string'
                  && (
                    <div
                      data-testid="preview"
                      role="presentation"
                      className="w-full h-full select-none overflow-hidden text-xs"
                    >
                      <pre className="overflow-visible">
                        {
                          typeof f.metadata.scheme === 'string'
                          && (
                            <code
                              dangerouslySetInnerHTML={{
                                __html: Prism.highlight(
                                  f.metadata.contents,
                                  Prism.languages[f.metadata.scheme],
                                  f.metadata.scheme,
                                ).split('\n').slice(0, 15).join('\n'),
                              }}
                              style={{
                                tabSize: 2,
                              }}
                            />
                          )
                        }
                        {
                          typeof f.metadata.scheme !== 'string'
                          && (
                            <code>
                              {f.metadata.contents}
                            </code>
                          )
                        }
                      </pre>
                    </div>
                  )
                }
              </div>
              <dl className="w-2/3 flex-shrink-0 m-0" data-testid="infoBox">
                <div className="w-full">
                  <dt className="sr-only">
                    Name
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={f.name}
                  >
                    {f.name}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Type
                  </dt>
                  <dd
                    title={f.type}
                    className="m-0 w-full text-ellipsis overflow-hidden"
                  >
                    {typeof f.metadata?.schemeTitle === 'string' ? `${f.metadata.schemeTitle} Source` : 'Text File'}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Size
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={`${formatNumeral(f.size ?? 0)} bytes`}
                  >
                    {formatFileSize(f.size)}
                  </dd>
                </div>
                {
                  typeof f.metadata?.language === 'string'
                  && (
                    <div>
                      <dt className="sr-only">
                        Language
                      </dt>
                      <dd
                        className="m-0 w-full text-ellipsis overflow-hidden"
                      >
                        {f.metadata.language.slice(0, 1).toUpperCase()}
                        {f.metadata.language.slice(1)}
                      </dd>
                    </div>
                  )
                }
              </dl>
            </div>
          )
        }
        {
          contentType === ContentType.IMAGE
          && (
            <div className="flex gap-4 w-full h-full relative">
              <div className={`h-full w-1/3 flex-shrink-0`}>
                {
                  typeof f.metadata?.previewUrl === 'string'
                  && (
                    <img
                      className="block w-full h-full object-center object-cover"
                      src={f.metadata.previewUrl}
                      alt={f.name}
                      data-testid="preview"
                    />
                  )
                }
              </div>
              <dl className="w-2/3 flex-shrink-0 m-0" data-testid="infoBox">
                <div className="w-full">
                  <dt className="sr-only">
                    Name
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={f.name}
                  >
                    {f.name}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Type
                  </dt>
                  <dd
                    title={f.type}
                    className="m-0 w-full text-ellipsis overflow-hidden"
                  >
                    {getMimeTypeDescription(f.type, f.name)}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Size
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={`${formatNumeral(f.size ?? 0)} bytes`}
                  >
                    {formatFileSize(f.size)}
                  </dd>
                </div>
                {
                  typeof f.metadata?.width === 'number'
                  && typeof f.metadata?.height === 'number'
                  && (
                    <div>
                      <dt className="sr-only">
                        Pixel Dimensions
                      </dt>
                      <dd
                        className="m-0 w-full text-ellipsis overflow-hidden"
                      >
                        {formatNumeral(f.metadata.width)}&times;{formatNumeral(f.metadata.height)} pixels
                      </dd>
                    </div>
                  )
                }
              </dl>
            </div>
          )
        }
        {
          contentType === ContentType.AUDIO
          && (
            <div className="flex flex-col gap-4 w-full h-full relative">
              <div className="h-2/5 flex-shrink-0 cursor-pointer relative">
                <div
                  ref={mediaContainerRef}
                  className="relative h-full w-full"
                />
                <div className="absolute bottom-0 left-0 z-[2]">
                  <button
                    onClick={playMedia}
                  >
                    {isPlaying ? 'Pause' : 'Play'}
                  </button>
                </div>
              </div>
              <dl className="h-3/5 flex-shrink-0 m-0 flex flex-col items-end" data-testid="infoBox">
                <div className="w-full">
                  <dt className="sr-only">
                    Name
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={f.name}
                  >
                    {f.name}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Type
                  </dt>
                  <dd
                    title={f.type}
                    className="m-0 w-full text-ellipsis overflow-hidden"
                  >
                    {getMimeTypeDescription(f.type)}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Size
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={`${formatNumeral(f.size ?? 0)} bytes`}
                  >
                    {formatFileSize(f.size)}
                  </dd>
                </div>
                {
                  typeof f.metadata?.duration === 'number'
                  && (
                    <div className="w-full">
                      <dt className="sr-only">
                        Duration
                      </dt>
                      <dd
                        className="m-0 w-full text-ellipsis overflow-hidden"
                        title={`${formatNumeral(f.metadata.duration)} seconds`}
                      >
                        {formatSecondsDuration(f.metadata.duration)}
                      </dd>
                    </div>
                  )
                }
              </dl>
            </div>
          )
        }
        {
          contentType === ContentType.VIDEO
          && (
            <div className="flex gap-4 w-full h-full relative">
              <div className={`h-full w-1/3 flex-shrink-0`}>
                {
                  typeof f.metadata?.previewUrl === 'string'
                  && (
                    <div
                      className="w-full h-full bg-black"
                      data-testid="preview relative"
                    >
                      <video
                        className="block w-full h-full object-center object-contain relative"
                        ref={mediaControllerRef as React.RefObject<HTMLVideoElement>}
                      >
                        <source
                          src={f.metadata.previewUrl}
                          type={f.type}
                        />
                      </video>
                      <div className="absolute bottom-0 left-0 hover:opacity-100 opacity-0">
                        <button
                          onClick={playMedia}
                        >
                          {isPlaying ? 'Pause' : 'Play'}
                        </button>
                      </div>
                    </div>
                  )
                }
              </div>
              <dl className="w-2/3 flex-shrink-0 m-0" data-testid="infoBox">
                <div className="w-full">
                  <dt className="sr-only">
                    Name
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={f.name}
                  >
                    {f.name}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Type
                  </dt>
                  <dd
                    title={f.type}
                    className="m-0 w-full text-ellipsis overflow-hidden"
                  >
                    {getMimeTypeDescription(f.type, f.name)}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Size
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={`${formatNumeral(f.size ?? 0)} bytes`}
                  >
                    {formatFileSize(f.size)}
                  </dd>
                </div>
                {
                  typeof f.metadata?.width === 'number'
                  && typeof f.metadata?.height === 'number'
                  && (
                    <div>
                      <dt className="sr-only">
                        Pixel Dimensions
                      </dt>
                      <dd
                        className="m-0 w-full text-ellipsis overflow-hidden"
                      >
                        {formatNumeral(f.metadata.width)}&times;{formatNumeral(f.metadata.height)} pixels
                      </dd>
                    </div>
                  )
                }
              </dl>
            </div>
          )
        }
        {
          contentType === ContentType.BINARY
          && (
            <div className="flex gap-4 w-full h-full relative">
              <div className={`h-full w-1/3 flex-shrink-0`}>
                {
                  f.metadata && (f.metadata?.contents instanceof ArrayBuffer)
                  && (
                    <div
                      data-testid="preview"
                      role="presentation"
                      className="w-full h-full select-none overflow-hidden text-xs"
                    >
                      <pre className="overflow-visible">
                        <code>
                          {
                            (Array.from(new Uint8Array((f.metadata.contents as ArrayBuffer).slice(0, 256))) as number[])
                              .reduce(
                                (byteArray: number[][], byte: number, i) => {
                                  if (i % 16 === 0) {
                                    return [
                                      ...byteArray,
                                      [byte],
                                    ]
                                  }

                                  const lastLine = byteArray.at(-1) as number[]

                                  return [
                                    ...(byteArray.slice(0, -1)),
                                    [...lastLine, byte],
                                  ]
                                },
                                [] as number[][],
                              )
                              .map((ba: number[]) => ba
                                .map((a) => a.toString(16).padStart(2, '0'))
                                .join(' ')
                              )
                              .join('\n')
                          }
                        </code>
                      </pre>
                    </div>
                  )
                }
              </div>
              <dl className="w-2/3 flex-shrink-0 m-0" data-testid="infoBox">
                <div className="w-full">
                  <dt className="sr-only">
                    Name
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={f.name}
                  >
                    {f.name}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Type
                  </dt>
                  <dd
                    title={f.type}
                    className="m-0 w-full text-ellipsis overflow-hidden"
                  >
                    {getMimeTypeDescription(f.type, f.name)}
                  </dd>
                </div>
                <div className="w-full">
                  <dt className="sr-only">
                    Size
                  </dt>
                  <dd
                    className="m-0 w-full text-ellipsis overflow-hidden"
                    title={`${formatNumeral(f.size ?? 0)} bytes`}
                  >
                    {formatFileSize(f.size)}
                  </dd>
                </div>
                {
                  typeof f.metadata?.language === 'string'
                  && (
                    <div>
                      <dt className="sr-only">
                        Language
                      </dt>
                      <dd
                        className="m-0 w-full text-ellipsis overflow-hidden"
                      >
                        {f.metadata.language.slice(0, 1).toUpperCase()}
                        {f.metadata.language.slice(1)}
                      </dd>
                    </div>
                  )
                }
              </dl>
            </div>
          )
        }
      </div>
    </div>
  )
}

const FilePreviewGrid = ({
  fileList,
}: { fileList?: FileList }) => {
  const { files } = useFilePreviews(fileList);
  const mediaContainerRef = React.useRef<HTMLDivElement>(null);

  const playMedia = (index: number) => () => {
    if (files.length < 1) {
      return;
    }
    const theFile = files[index];
    if (typeof theFile.internal?.playPause === 'function') {
      theFile.internal.playPause();
    }
  };

  React.useEffect(() => {
    if (files.length < 1) {
      return;
    }

    files.forEach((theFile, i) => {
      if (typeof theFile.internal?.createMediaInstance === 'function' && mediaContainerRef.current) {
        theFile.internal.createMediaInstance(mediaContainerRef.current.children[i].children[0]);
      }
    });

    return () => {
      files.forEach((theFile) => {
        if (typeof theFile.internal?.destroyMediaInstance === 'function') {
          theFile.internal.destroyMediaInstance();
        }
      });
    }
  }, [files, mediaContainerRef]);

  return (
    <div className="w-full h-full overflow-auto -mx-4 px-4">
      <div
        className={`w-full grid gap-4 grid-cols-3`}
        ref={mediaContainerRef}
      >
        {files.map((f, i) => (
          <div
            data-testid="selectedFileItem"
            key={i}
            className={`w-full aspect-square rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10`}
            title={[f.name, getMimeTypeDescription(f.type), formatFileSize(f.size)].join(', ')}
          >
            {
              f.type?.startsWith('image/')
              && typeof f.metadata?.previewUrl === 'string'
              && (
                <img
                  className="block w-full h-full object-center object-cover"
                  src={f.metadata.previewUrl}
                  alt={f.name}
                  data-testid="preview"
                />
              )
            }
            {
              f.type?.startsWith('audio/')
              && (
                <div
                  className="absolute top-0 left-0 w-full h-full cursor-pointer"
                  onClick={playMedia(i)}
                />
              )
            }
          </div>
        ))}
      </div>
    </div>
  )
}

export const FileSelectBox = React.forwardRef<HTMLInputElement, FileButtonProps>(
  (
    {
      label = '',
      hint = '',
      border = false,
      block = false,
      enhanced = false,
      hiddenLabel = false,
      multiple = false,
      onChange,
      disabled = false,
      className: _className,
      placeholder: _placeholder,
      as: _as,
      ...etcProps
    }: FileButtonProps,
    forwardedRef,
  ) => {
    const [renderEnhanced, setRenderEnhanced] = React.useState(false);
    const [fileList, setFileList] = React.useState<FileList>();
    const defaultRef = React.useRef<HTMLInputElement>(null);
    const ref = forwardedRef ?? defaultRef;

    const addFile: React.ChangeEventHandler<HTMLInputElement> = (e) => {
      if (!enhanced) {
        onChange?.(e);
        return;
      }

      setFileList(e.currentTarget.files as FileList);
      onChange?.(e);
    };

    const deleteFiles: React.MouseEventHandler<HTMLButtonElement> = () => {
      if (typeof ref === 'object' && ref.current) {
        ref.current.value = '';
        setFileList(undefined);
        setTimeout(() => {
          delegateTriggerChangeEvent(ref.current as HTMLInputElement);
        })
      }
    };

    const cancelEvent = (e: React.DragEvent) => {
      e.stopPropagation();
      e.preventDefault();
    }

    const handleDropZone: React.DragEventHandler<HTMLDivElement> = async (e) => {
      cancelEvent(e);
      const { dataTransfer } = e;
      if (typeof ref === 'object' && ref.current) {
        const { files } = dataTransfer;
        setFileList(ref.current.files = files);
        delegateTriggerChangeEvent(ref.current);
      }
    }

    React.useEffect(() => {
      setRenderEnhanced(enhanced);
    }, [enhanced]);

    return (
      <div
        className={BlobBase.Root({
          border,
          block,
        })}
        onDragEnter={cancelEvent}
        onDragOver={cancelEvent}
        onDrop={handleDropZone}
        data-testid="root"
      >
        <label
          className="block absolute top-0 left-0 w-full h-full cursor-pointer"
          data-testid="clickArea"
        >
          <input
            {...etcProps}
            disabled={disabled}
            ref={ref}
            type="file"
            className={`${renderEnhanced ? 'sr-only' : ''}`}
            onChange={addFile}
            multiple={multiple}
            data-testid="input"
          />
        </label>
        {
          border && (
            <span
              data-testid="border"
              className={
                BlobBase.Border({
                  border,
                  block,
                })
              }
            />
          )
        }
        {
          label
          && !hiddenLabel
          && (
            <div
              data-testid="label"
              className={BlobBase.LabelWrapper({
                border,
                block,
              })}
            >
              {label}
            </div>
          )
        }
        {
          (fileList?.length ?? 0) < 1
          && renderEnhanced
          && hint
          && (
            <div
              data-testid="hint"
              className="absolute top-0 left-0 w-full h-full pointer-events-none box-border overflow-hidden pt-4"
            >
              <div className="flex items-center justify-center w-full h-full">
                {hint}
              </div>
            </div>
          )
        }
        {
          (fileList?.length ?? 0) > 0
          && renderEnhanced
          && (
            <>
              <div className={`absolute top-0 left-0 w-full h-full pointer-events-none pb-12 box-border overflow-hidden pt-8`}>
                <div className={`pointer-events-auto w-full h-full px-4 pb-4 box-border`}>
                  {
                    multiple
                    && (
                      <FilePreviewGrid fileList={fileList} />
                    )
                  }
                  {
                    !multiple
                    && (
                      <FilePreview fileList={fileList} />
                    )
                  }
                </div>
              </div>
              <div className="pointer-events-none absolute bottom-0 left-0 w-full text-center h-12 box-border flex">
                <div className="w-0 flex-auto flex flex-col items-center justify-center h-full">
                  <span
                    className={ButtonBase.Button({
                      size: ButtonBase.ButtonSize.MEDIUM,
                      border: false,
                      block: true,
                      variant: ButtonBase.ButtonVariant.OUTLINE,
                      disabled,
                      compact: false,
                      menuItem: false,
                    })}
                  >
                    Reselect
                  </span>
                </div>
                <div className="pointer-events-auto w-0 flex-auto flex flex-col items-center justify-center h-full">
                  <button
                    data-testid="clear"
                    type="button"
                    onClick={deleteFiles}
                    className={ButtonBase.Button({
                      size: ButtonBase.ButtonSize.MEDIUM,
                      border: false,
                      block: true,
                      variant: ButtonBase.ButtonVariant.OUTLINE,
                      disabled,
                      compact: false,
                      menuItem: false,
                    })}
                  >
                    {multiple ? 'Clear' : 'Delete'}
                  </button>
                </div>
              </div>
            </>
          )
        }
      </div>
    );
  }
);

FileSelectBox.displayName = 'FileSelectBox';

const BlobReact = {
  FileSelectBox
}

const BlobPage: NextPage = () => {
  return (
    <BlobReact.FileSelectBox
      border
      enhanced
      label="Primary Image"
      hint="Select any files here"
      block
    />
  )
}

export default BlobPage;
