import styled from 'styled-components'
import { endpoint } from '../config'

const ImageStyle = styled.div`
  display: grid;
  grid-template-columns: 250px 100px 1fr;
  grid-auto-flow: dense;
  align-items: start;
  justify-items: start;
  align-content: start;
  justify-content: start;

  a,
  img {
    grid-row: span 6;
    max-width: 230px;
    max-height: 140px;
    justify-self: center;
  }

  h2 {
    grid-column: span 2;
    margin: 0 0 0.5em 0;
    line-height: 1;
  }

  .description {
    grid-column: span 2;
  }

  p {
    margin: 0;
    line-height: 1.5;
  }
`

const File = props => {
  const { path, name, description, filename, mimetype, size } = props.data
  const downloadPath = `${endpoint}/${path}`
  return (
    <ImageStyle>
      {mimetype.startsWith('image/') ? (
        <img src={downloadPath} alt={description} />
      ) : (
        <a href={downloadPath}>
          <img src={`${endpoint}/static/document-download-solid.png`} alt={description} width={75} />
        </a>
      )}
      <h2>{name}</h2>
      <p className='description'>{description}</p>
      <p>Path</p><p><a href={downloadPath}>{downloadPath}</a></p>
      <p>Filename</p><p>{filename}</p>
      <p>MIME Type</p><p>{mimetype}</p>
      <p>Size</p><p>{size}</p>
    </ImageStyle>
  )
}

export default File