import React, { useMemo } from 'react';
import { Box, Text } from '@wix/design-system';
import { File } from './FileProps';
import { formatBytes } from './formatBytes';
import { THUMB_WIDTH, SMALL_THUMB_WIDTH } from './resolveFileByMediaType';

interface FileDetailsProps {
  file: File;
  showDetails: boolean;
}

export function FileDetails({ file, showDetails }: FileDetailsProps) {
  const fileSize = useMemo(
    () => formatBytes(file.sizeInBytes),
    [file.sizeInBytes],
  );

  return (
    <Box
      gap="4px"
      direction="vertical"
      dataHook={`file-details-${file.mediaId}`}
      maxWidth={`calc(100% - ${
        showDetails ? THUMB_WIDTH + 60 : SMALL_THUMB_WIDTH + 10
      }px)`}
      paddingRight={!showDetails ? 'SP2' : '0'}
    >
      <Text
        ellipsis
        size="small"
        dataHook={`file-details-name-${file.mediaId}`}
        paddingRight="SP2"
      >
        {file.displayName}
      </Text>
      {showDetails && (
        <Box verticalAlign="middle">
          <Text
            paddingRight="SP2"
            size="tiny"
            secondary
            ellipsis
            dataHook={`file-details-size-${file.mediaId}`}
          >
            {fileSize} {file.mediaType}
          </Text>
        </Box>
      )}
    </Box>
  );
}