// @flow
import { Icon } from '@siteone/pagebuilder-ui'
import { Element, styled } from '@siteone/system-core'
import React, { useContext } from 'react'
import Context from '../EventsContext'
import Rename from './Rename'
import Tags from './Tags'
import Thumb from './Thumb'

type Props = {
  mediaItem: Object,
  withControls: boolean,
  withFolders: boolean,
}

const Base = styled(Element)`
  width: 280px;
  height: 50vh;
  max-height: 540px;
  padding-left: 10px;
  border-left: 1px solid #eee;
  overflow: auto;
`

const Dl = styled.dl`
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 26px;
`

const Dt = styled.dt`
  text-transform: capitalize;
  padding-right: 10px;
`

const Dd = styled.dd`
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`

const Image = styled(Thumb)`
  max-width: 100%;
  max-height: 250px;
  margin: 0 auto;
  display: block;
`

const SectionTitle = styled(Element)`
  font-weight: bold;
  margin-bottom: 13px;
`

const EmptyDetail = styled(Element)`
  height: 150px;
  background: #eaf7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`

const ImageContainer = styled(Element)`
  background: #eaf7ff;
  margin-bottom: 10px;
  min-height: 250px;
  overflow: hidden;
`

const InfoContainer = styled(Element)`
  padding: 0 10px;
`

const MediaDetail = ({ mediaItem, withControls, isVideo }: Props) => {
  const {
    props,
    component: Component = Image,
    details = {},
  } = mediaItem
  const ctx = useContext(Context)
  const isEditable = ctx.selectedCat.isEditable
  const canEdit = withControls && isEditable

  return (
    <Base>
      <div>
        {!props && (
          <div>
            <EmptyDetail>
              <Icon name="media/Camera" size="110" color="#c9e0ef"/>
            </EmptyDetail>
            <br />

            {isVideo ? 'Není vybrán žádný video' : 'Není vybrán žádný obrázek'}
          </div>
        )}
        {props && (
          <React.Fragment>
            <ImageContainer>
              <Component {...props} />
            </ImageContainer>
            {canEdit && (<Rename name={props.alt} url={props.url} />) }
            {!canEdit && props.alt}
            <hr />
            <InfoContainer>
              {canEdit && (
                <React.Fragment>
                  <SectionTitle>Značky</SectionTitle>
                  <Tags tags={props.tags} url={props.url}/>
                </React.Fragment>
              )}
              <hr />
              <SectionTitle>Informace o souboru</SectionTitle>
              {Object.keys(details).map(key => (
                <Dl key={key}>
                  <Dt>{key}:</Dt>
                  <Dd>{Array.isArray(details[key]) ? details[key].join(', ') : details[key]}</Dd>
                </Dl>
              ))}
            </InfoContainer>
          </React.Fragment>
        )}
      </div>
    </Base>
  )
}

export default MediaDetail