import React from 'react'
import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

import { marginHelper } from './styledHelpers'

// icon not like in the design, but untill we + Pubsweet decide on an Icon
// implementation that supports custom icons this will do. Jen is working on it
const DragHandle = props => (
  <Handle {...props}>
    <Icon secondary size={2}>
      menu
    </Icon>
  </Handle>
)

DragHandle.displayName = 'DragHandle'

export default DragHandle

// #region styles
const Handle = styled.div`
  align-self: stretch;
  align-items: center;
  background-color: transparent;
  border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
  cursor: move;
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: calc(${th('gridUnit')} * 4);

  span {
    padding: 0;
  }

  ${marginHelper};
`
// #endregion