import React from 'react'
import { get } from 'lodash'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { selectCurrentUser } from 'xpub-selectors'
import { BreadcrumbsHeader } from 'pubsweet-components-faraday/src/components'

import LinkOrcID from './LinkOrcID'
import AccountDetails from './AccountDetails'
import EmailNotifications from './EmailNotifications'
import { changeEmailSubscription } from '../../redux/users'

const UserProfilePage = ({ history, user, changeEmailSubscription }) => (
  <Root>
    <BreadcrumbsHeader
      history={history}
      info={get(user, 'email')}
      showBack
      title="Account Settings"
      underlined
    />
    <AccountDetails history={history} user={user} />
    <EmailNotifications
      changeEmailSubscription={changeEmailSubscription}
      subscribed={get(user, 'notifications.email.user', true)}
      userId={get(user, 'id')}
    />
    <LinkOrcID id={get(user, 'id')} orcid={get(user, 'orcid')} />
  </Root>
)

export default compose(
  connect(
    state => ({
      user: selectCurrentUser(state),
    }),
    { changeEmailSubscription },
  ),
)(UserProfilePage)

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 60em;
`
// #endregion