import React, { Fragment } from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { th } from '@pubsweet/ui-toolkit'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
import { withJournal } from 'xpub-journal'
import { Icon, Button } from '@pubsweet/ui'
import { compose, withHandlers, withProps } from 'recompose'

import {
  Row,
  Text,
  Item,
  Label,
  OpenModal,
  Pagination,
  ActionLink,
  IconButton,
  withPagination,
} from 'pubsweet-component-faraday-ui'

const NavLink = styled.div`
  align-items: center;
  cursor: auto;
  display: flex;
  justify-content: flex-start;
`

const Users = ({
  page,
  users,
  theme,
  history,
  journal,
  getUserRoles,
  itemsPerPage,
  getStatusLabel,
  toggleUserStatus,
  paginatedItems,
  ...rest
}) => (
  <Fragment>
    <Row alignItems="center" justify="space-between" mb={3}>
      <Item alignItems="center">
        <NavLink>
          <Icon secondary size={2}>
            arrow-left
          </Icon>
          <Link to="/admin">Admin Dashboard</Link>
        </NavLink>
        <ActionLink icon="plus" ml={2}>
          ADD USER
        </ActionLink>
      </Item>

      <Pagination {...rest} itemsPerPage={itemsPerPage} page={page} />
    </Row>

    <Row alignItems="center" mb={1} pl={2}>
      <Item flex={2}>
        <Label>Full name</Label>
      </Item>
      <Item flex={4}>
        <Label>Email</Label>
      </Item>
      <Item flex={2}>
        <Label>Affiliation</Label>
      </Item>
      <Item flex={2}>
        <Label>Roles</Label>
      </Item>
      <Item flex={1}>
        <Label>Status</Label>
      </Item>
      <Item />
      <Item />
    </Row>
    {paginatedItems.map(u => (
      <UserRow alignItems="center" key={u.id} pb={1 / 2} pl={2} pt={1 / 2}>
        <Item flex={2}>
          <Text>{`${u.firstName} ${u.lastName}`}</Text>
        </Item>
        <Item flex={4}>
          <Text>{u.email}</Text>
        </Item>
        <Item flex={2}>
          <Text>{u.affiliation}</Text>
        </Item>
        <Item flex={2}>
          <Text customId>{getUserRoles(u)}</Text>
        </Item>
        <Item flex={1} secondary>
          <Text>{getStatusLabel(u)}</Text>
        </Item>
        <HiddenItem justify="center">
          <IconButton icon="edit-2" iconSize={2} onClick={() => {}} />
        </HiddenItem>
        <HiddenItem justify="justify" pl={1} pr={1}>
          <OpenModal
            modalKey={u.id}
            subtitle="Gica Hagi"
            title="Are you sure to deactivate user?"
          >
            {showModal => (
              <Button onClick={showModal} size="small">
                DEACTIVATE
              </Button>
            )}
          </OpenModal>
        </HiddenItem>
      </UserRow>
    ))}
  </Fragment>
)

export default compose(
  ConnectPage(() => [actions.getUsers()]),
  connect(state => ({ items: get(state, 'users.users') })),
  withJournal,
  withPagination,
  withProps(({ journal: { roles = {} } }) => ({
    roles: Object.keys(roles),
  })),
  withHandlers({
    getStatusLabel: () => ({ isConfirmed, isActive = true }) => {
      if (!isActive) {
        return 'INACTIVE'
      }
      return isConfirmed ? 'ACTIVE' : 'INVITED'
    },
    getUserRoles: ({ journal: { roles = {} } }) => user =>
      Object.entries(roles)
        .reduce((acc, role) => (user[role[0]] ? [...acc, role[1]] : acc), [])
        .join(', '),
  }),
)(Users)

// #region styled-components
const HiddenItem = styled(Item)`
  opacity: 0;
`

const UserRow = styled(Row)`
  background-color: ${th('colorBackgroundHue2')};

  &:hover {
    background-color: #eeeeee;

    ${HiddenItem} {
      opacity: 1;
    }
  }
`
// #endregion