import React, {useContext} from 'react'
import { useDrop } from 'react-dnd'
import { IconButton } from '@siteone/pagebuilder-ui'
import { styled, Element } from '@siteone/system-core'
import Context from '../EventsContext';
import DNDDirType from '../../symbols/dnd';

const DirectoryElement = styled(Element)`
  position: relative;
  height: 42px;
  padding: 0 24px;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: ${props => (props.selected ? '#3899ec' : '')};
  color: ${props => (props.selected ? '#fff' : '')};
  transition: all 0.2s;
  border-bottom: 1px solid #eee;

  &:hover {
    background: #74b8f3;
    color: #fff;
    & > * {
      display: block;
    }
  }
`

const RemoveButton = styled(IconButton)`
  position: absolute;
  right: 0;
  display: none;
  transition: all 0.2s;
  &:hover {
    transform: scale(1.2);
  }
`

const Directory = ({
  id,
  aplCode,
  name,
  selected,
  onSelectFolder,
  removeFolder,
}) => {
  const ctx = useContext(Context)
  const [{backgroundColor}, drop] = useDrop({
    accept: DNDDirType,
    collect: (monitor) => ({
      backgroundColor: monitor.isOver({shallow: true}) ? '#eee' : monitor.canDrop() ? '#ccc' : ''
    }),
    drop: async ({mediaItem}) => {
      if (selected.id === id) {
        return
      }

      const {url} = mediaItem.props
      mediaItem.props.structureItem = { id, name, aplCode }

      try {
        await ctx.onUpdateImage(url, mediaItem)
        ctx.removeMedia(mediaItem.props)
      } catch (e) {
        console.error(e)
      }
    }
  })
  // confirm and then remove folder
  const confirmAndRemove = () =>
    window.confirm(
      `Opravdu chcete smazat adresář ${name} a s ním i všechny fotky v něm obsažené?`,
    ) && removeFolder(id)

  const handleClick = () => onSelectFolder({
    id, name, aplCode,
  })

  return (
    <div ref={drop} style={{backgroundColor}}>
      <DirectoryElement selected={selected.id === id} onClick={handleClick}>
        {name}
        {removeFolder && (
          <RemoveButton
            icon="action/Delete"
            iconColor="black"
            color="black"
            type="button"
            onClick={confirmAndRemove}
          />
        )}
      </DirectoryElement>
    </div>
  )
}

export default Directory