import { T9n } from 'features/T9n'

import { client } from 'features/AuthServiceApp/config/clients'

import { AUTH_SERVICE } from 'config/routes'

import {
  ScBody,
  Modal,
  ScApplyButton,
  ScHeaderTitle,
  ScText,
  ScLink,
} from './styled'

import {
  Header,
  Wrapper,
  Footer,
} from '../RegisterPopup/styled'

type Props = {
  handleModalClose: () => void,
  isModalOpen: boolean,
}

export const ConfirmPopup = (props: Props) => {
  const {
    handleModalClose,
    isModalOpen,
  } = props

  return (
    <Modal isOpen={isModalOpen} withCloseButton={false}>
      <Wrapper>
        <Header>
          <ScHeaderTitle>
            <T9n t='consent' />
          </ScHeaderTitle>
        </Header>
        <ScBody>
          <ScText>
            <T9n t='updated_terms' />
          </ScText>
          <ScText>
            <T9n t='by_clicking' />
            <ScLink href={`${AUTH_SERVICE}${client.termsLink}`} target='_blank' id='personal_t_k'>
              <T9n t='terms_and_conditions' />
            </ScLink>&nbsp;
            <T9n t='and' />
            <ScLink href={`${AUTH_SERVICE}${client.privacyLink}`} target='_blank' id='personal_policy'>
              <T9n t='privacy_policy_and_statement' />
            </ScLink>
          </ScText>
        </ScBody>
        <Footer>
          <ScApplyButton onClick={() => handleModalClose()}>
            <T9n t='i_agree' />
          </ScApplyButton>
        </Footer>
      </Wrapper>
    </Modal>
  )
}