import React from 'react'
import Form from 'react-uikit/form'
import TextInput from 'react-uikit/input-text'
import inputNames from 'common-fe/constants/input-names'
import content from '../../content'
import {PORTFOLIO_NAME_MAX_LENGTH} from 'store/config'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const PortfolioName = () => {
    const id = 'portfolio-name'
    const inputName = inputNames.NAME
    const labelClasses = bem.classNames(
        'c-portfolio-onboarding-form__portfolio-name-label'
    )
    const inputClasses = bem.classNames(
        'c-portfolio-onboarding-form__portfolio-name-input'
    )
    const contentClasses = bem.classNames(
        'c-portfolio-onboarding-form__portfolio-name-content'
    )

    return (
        <React.Fragment>
            <label className={labelClasses} htmlFor={id}>
                Portfolio Name
            </label>

            <Form.Field
                className={inputClasses}
                id={id}
                maxLength={PORTFOLIO_NAME_MAX_LENGTH}
                name={inputName}
                render={TextInput}
                required
            />

            <p className={contentClasses}>{content[inputName]}</p>
        </React.Fragment>
    )
}

export default PortfolioName