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

const Name = styled.span`
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px;
  font-size: 13px;
  display: block;
  visibility: ${props => (props.selected ? 'visible' : 'hidden')};
  width: 100%;
`

const Control = styled(Element)`
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 8px;
  position: absolute;
  bottom: 0;
  width: 100%;
  visibility: ${props => (props.selected ? 'visible' : 'hidden')};
  span {
    margin-right: 10px;
  }
`

const ImagePreview = styled(Element)`
  padding: 6px;
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  margin-top: 2px;
  border-radius: 3px;
  box-shadow: 0 0 11px 0px #ccc;
  img {
    width: 300px;
    max-width: none;
  }
`


const MediaListItemContent = styled(Element)`
  position: relative;
  margin-right: 15px;
  margin-bottom: 15px;
  display: block;
  outline: none;
  border-color: ${props => (props.selected ? 'cyan' : '')};
  box-shadow: ${props => (props.selected ? '0 0 0 3px #3c98e8' : '')};
  background: ${props => (props.selected ? 'rgba(0, 0, 0, 0.5)' : '')};
  img {
    display: block;
  }
  &:hover {
    span,
    div {
      visibility: visible;
    }
  }
`

type Props = {
  onClick: Function,
  isSelected: boolean,
  children: React.Node,
  alt: string,
  url: string,
  withControls: boolean,
  data: {
    url: string,
    alt: string
  },
}

const MediaListItem = (props: Props) => {
  const ctx = useContext(Context)
  const [preview, setPreview] = useState(false)
  const { children, onClick, isSelected, withControls } = props
  const { alt = '', url } = props.data
  const isEditable = ctx && get(ctx, 'selectedCat.isEditable')
  const deleteMedia = async e => {
    const confirmation = confirm('Opravdu chcete smazat tento soubor?')
    if (confirmation) {
      try {
        await ctx.onRemoveFile(props)
        ctx.removeMedia(props.data)
      } catch (e) {
        console.error(e)
      }
    }
  }

  return (
    <MediaListItemContent role="button" tabIndex="-1" selected={isSelected}>
      {alt && (
        <Name onClick={onClick} selected={isSelected}>
          {alt}
        </Name>
      )}

      {withControls ? (
        <Control selected={isSelected}>
          {isEditable && ctx.onRemoveFile && (
            <Icon
              name="action/Delete"
              color="white"
              size="20"
              onClick={deleteMedia}
            />
          )}
          <div onMouseOver={() => setPreview(true)} onMouseOut={() => setPreview(false)}>
            <Icon name="navigation/ZoomIn" color="white" size="20" />
            {preview && (
              <ImagePreview>
                <img src={url} alt="preview" />
              </ImagePreview>
            )}
          </div>
          <a href={url} target="_blank" rel="noopener noreferrer">
            <Icon name="action/Download" color="white" size="20" />
          </a>
        </Control>
      ) : null}

      <div onClick={onClick}>
        {children}
      </div>
    </MediaListItemContent>
  )

}

export default MediaListItem