import { styled } from 'styleh-components'
import { StyledProps } from './typings'

export interface DraggableWrapperProps {
  x: StyledProps.XPosition
  y: StyledProps.YPosition
  isDragging: StyledProps.IsDragging
  column: StyledProps.Column
  row: StyledProps.Row
}

const DraggableWrapper = styled.div`
  ${(props: DraggableWrapperProps) =>
    props.isDragging &&
    styled.css`
      z-index: 1;
      opacity: 0.8;
      cursor: grabbing;
    `};
  z-index: 2;
  cursor: grab;
  background: white;
`

const StyledDraggableWrapper = styled(DraggableWrapper)`
  grid-column: auto / span ${(props: DraggableWrapperProps) => props.column};
  grid-row: auto / span ${(props: DraggableWrapperProps) => props.row};
`

const PlaceholderWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background: transparent;
`

const Placeholder = styled.span`
  width: 100%;
  height: 100%;
  border: 2px dashed #2c2c2c;
`

export {
  StyledDraggableWrapper,
  DraggableWrapper,
  Placeholder,
  PlaceholderWrapper,
}