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

import {
  Row,
  Item,
  Text,
  Label,
  ShadowedBox,
  IconTooltip,
} from 'pubsweet-component-faraday-ui'

const OrcidTooltip = () => (
  <Text secondary>
    When an author, editor, or reviewer has a financial/personal interest or
    belief that could affect his/her objectivity, or inappropriately influence
    his/her actions, a potential conflict of interest exists.{' '}
  </Text>
)

const LinkOrcID = ({ orcid = '', id }) => (
  <ShadowedBox mt={2}>
    <Row alignItems="center">
      <Item alignItems="center">
        <Label>OrcID Account </Label>
        <IconTooltip content={OrcidTooltip} iconSize={2} interactive primary />
      </Item>
      <Item justify="flex-end">
        <Link href={`/api/users/orcid?userId=${id}`}>Link</Link>
      </Item>
    </Row>

    <Row>
      <Item>
        <Label>{orcid}</Label>
      </Item>
    </Row>
  </ShadowedBox>
)

export default LinkOrcID

// #region styles
const Link = styled.a`
  color: ${th('action.color')};
  cursor: default;
  text-decoration: none;

  &:hover {
    color: ${th('colorSecondary')};
    text-decoration: none;
  }

  &:active,
  &:focus {
    color: ${th('action.colorActive')};
    text-decoration: none;
  }
`
// #endregion