import React, { useContext } from 'react'
import { Grid, Col } from '@siteone/pagebuilder-ui'
import { styled, Element } from '@siteone/system-core'
import get from 'lodash/get'
import UploadButton from '../UploadButton'
import Context from '../EventsContext'

const Base = styled(Element)`
  background: #eaf7ff;
  border-bottom: 1px solid #d9e1e8;
  padding: 0 25px 0 0;
`

const StyletTab = styled(Element)`
  color: #075673;
  display: flex;
  align-items: center;
  height: 54px;
  background-color: ${props => (props.selected ? 'white' : 'transparent')};
  padding: 0 25px;
  border-right: 1px solid #d9e1e8;
  padding-top: 0;
  cursor: pointer;
  &:hover {
    background-color: white;
  }
`


const Tab = ({ name, selected, value, setCat }) => (
  <StyletTab selected={selected} onClick={() => setCat(value)}>
    {name}
  </StyletTab>
)

const MediaLibraryPanel = () => {
  const ctx = useContext(Context)
  const filesCategories = ctx.filesCategories || []
  return (
    <Base>
      <Grid justifyContent='space-between'>
        <Col size={6} justifyContent='flex-start' flexDirection='row'>
          {filesCategories.map(category => (
            <Tab
              name={category.name}
              key={category.aplCode}
              value={category}
              setCat={ctx.setCat}
              selected={ctx.selectedCat.aplCode === category.aplCode}
            />
          ))}
        </Col>
        <Col
          size={6}
          justifyContent='flex-end'
          flexDirection='row'
          alignItems='center'
        >
          {get(ctx, 'selectedCat.isEditable') && (
            <UploadButton />
          )}
        </Col>
      </Grid>
    </Base>
  )
}

export default MediaLibraryPanel