import React from 'react'
import { Element, styled } from '@siteone/system-core'
import get from 'lodash/fp/get'

import { bytesToSize } from '../helpers'
import FileStatus from './FileStatus'

const getUri = get('uri')
const getStatus = get('status')

const FileName = styled(Element)`
  max-width: 350px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`

const LI = styled.li`
  padding: 18px 22px;
  color: #2b5672;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  &:last-child {
    border-bottom: 0;
  }
`

const Desc = styled.p`
  color: #b6c1cd;
  display: block;
  margin-top: 8px;
`

const Thumb = styled.img`
  margin-right: 20px;
  width: 54px;
  height: 54px;
  float: left;
`

const Files = ({items, filesStatus}) => (
  <ul>
    {items.map(file => (
      <LI key={file.name}>
        <Element
          alignItems='center'
          display='flex'
          justifyContent='space-between'
        >
          <Element alignItems='center' display='flex'>
            <Thumb src={getUri(filesStatus[file.name])} />
            <div>
              <FileName>{file.name}</FileName>
              <Desc>{bytesToSize(file.size)}</Desc>
            </div>
          </Element>
          <FileStatus status={getStatus(filesStatus[file.name])} />
        </Element>
      </LI>
    ))}
  </ul>
)

export default Files