import React from 'react'
import { get } from 'lodash'
import { Field } from 'redux-form'
import styled from 'styled-components'
import { ValidatedField, YesOrNo } from '@pubsweet/ui'
import { required as requiredValidator } from 'xpub-validators'

import {
  Row,
  Item,
  Text,
  Label,
  Textarea,
  ActionLink,
  IconTooltip,
  marginHelper,
  RowOverrideAlert,
} from './'

const RadioWithComments = ({
  required,
  subtitle,
  radioLabel,
  formValues,
  commentsOn,
  radioFieldName,
  tooltipContent,
  commentsSubtitle,
  commentsFieldName,
  commentsPlaceholder,
  ...rest
}) => (
  <Root {...rest}>
    <Row alignItems="center" justify="flex-start">
      <Item>
        <Label required={required}>{radioLabel}</Label>
        {tooltipContent && (
          <IconTooltip content={tooltipContent} interactive primary />
        )}
      </Item>
    </Row>

    <Row alignItems="center" justify="flex-start" mb={1}>
      <Field
        component={({ input }) => <YesOrNo {...input} />}
        name={radioFieldName}
      />
    </Row>

    {get(formValues, radioFieldName, '') === commentsOn && (
      <RowOverrideAlert alignItems="center" justify="flex-start">
        <Item data-test="submission-conflicts-text" vertical>
          {commentsSubtitle && (
            <Text secondary>
              {commentsSubtitle}
              {subtitle && (
                <ActionLink to={subtitle.link}>{subtitle.label}</ActionLink>
              )}
            </Text>
          )}
          <ValidatedField
            component={Textarea}
            name={commentsFieldName}
            placeholder={commentsPlaceholder}
            validate={required ? [requiredValidator] : []}
          />
        </Item>
      </RowOverrideAlert>
    )}
  </Root>
)

export default RadioWithComments

// #region styles
const Root = styled.div`
  width: 100%;

  ${marginHelper};
`
// #endregion