import React from 'react'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Icon, Button } from '@pubsweet/ui'
import { withRouter } from 'react-router-dom'
import ZipFiles from 'pubsweet-components-faraday/src/components/Files/ZipFiles'
import {
  Decision,
  Recommendation,
} from 'pubsweet-components-faraday/src/components'

import { createRevision } from 'pubsweet-component-wizard/src/redux/conversion'

import {
  canMakeRevision,
  canMakeDecision,
  canMakeRecommendation,
} from '../../../component-faraday-selectors'

const SideBarActions = ({
  project,
  version,
  createRevision,
  canMakeRevision,
  canMakeDecision,
  canMakeRecommendation,
}) => (
  <Root>
    {canMakeRevision && (
      <DecisionButton onClick={createRevision}>Submit revision</DecisionButton>
    )}
    {canMakeDecision && (
      <Decision
        collectionId={project.id}
        fragmentId={version.id}
        modalKey={`decide-${version.id}`}
      />
    )}

    {canMakeRecommendation && (
      <Recommendation
        collectionId={project.id}
        fragmentId={version.id}
        modalKey={`recommend-${version.id}`}
      />
    )}
    <ZipFiles
      archiveName={`ID-${project.customId}`}
      collectionId={project.id}
      fragmentId={version.id}
    >
      <ClickableIcon>
        <Icon>download</Icon>
      </ClickableIcon>
    </ZipFiles>
  </Root>
)

export default compose(
  withRouter,
  connect(
    (state, { project }) => ({
      canMakeDecision: canMakeDecision(state, project),
      canMakeRevision: canMakeRevision(state, project),
      canMakeRecommendation: canMakeRecommendation(state, project),
    }),
    (dispatch, { project, version, history }) => ({
      createRevision: () => dispatch(createRevision(project, version, history)),
    }),
  ),
)(SideBarActions)

// #region styled-components
const Root = styled.div`
  border-bottom: ${th('borderDefault')};
  display: flex;
  justify-content: flex-end;
  padding: ${th('subGridUnit')};
`

const ClickableIcon = styled.div`
  margin: 0 ${th('subGridUnit')};
  &:hover {
    opacity: 0.7;
  }
`

const DecisionButton = styled(Button)`
  align-items: center;
  background-color: ${th('colorPrimary')};
  color: ${th('colorTextReverse')};
  display: flex;
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
  height: calc(${th('subGridUnit')} * 5);
  padding: calc(${th('subGridUnit')} / 2) ${th('subGridUnit')};
  text-align: center;
  white-space: nowrap;
`
// #endregion