import React from 'react'
import { AntCol as Col, AntRow as Row, Alert, icons, Icon, CardHeader, Card, Button } from 'lean-theme'
import { useTranslation } from 'react-i18next'
import { viewDependentsStatuses } from '../../../constants'
import styles from './DependentsList.module.scss'
import { useRouter } from '../../hooks/'

const Dependent = ({ nationalId, dependentDetail }) => (
    <>
        <div className={styles['dependent-detail']}>
            <span className={styles['dependent-Icon']}>
                <Icon svg={icons.DEPENDENT_ICON} additions={['fit-to-wrapper']} />
            </span>
            <span className={styles['dependent-info']}>{dependentDetail}</span>
        </div>
        <div className={styles['dependent-detail']}>
            <span className={styles['user-Icon']}>
                <Icon svg={icons.USER} additions={['fit-to-wrapper']} />
            </span>
            <span className={styles['dependent-info']}>{nationalId}</span>
        </div>
    </>
)

export const DependentsList = ({ dependents }) => {
    const [t] = useTranslation()

    const {
        history: { push }
    } = useRouter()

    const goToAddDependent = () => push('/add-user')

    return (
        <Row gutter={20} type="flex">
            {dependents.map(({ cardHeader, dependentDetail, nationalId, status }, index) => {
                let statusClass = []

                const isRequestPending = status === viewDependentsStatuses.PENDING
                status === viewDependentsStatuses.FEMALE && statusClass.push('female')
                status === viewDependentsStatuses.MALE && statusClass.push('male')
                return (
                    <Col span={8} key={index} className={styles['Col']}>
                        <Card
                            additions={['dependents-list']}
                            title={
                                <CardHeader
                                    nativeIcon="user"
                                    title={cardHeader}
                                    iconAdditions={['dependents-list', ...statusClass]}
                                />
                            }
                            actions={
                                isRequestPending
                                    ? []
                                    : [
                                          <>
                                              <Icon type="edit" />
                                              &nbsp;
                                              {t('viewDependents.update')}
                                          </>,
                                          <Icon type="ellipsis" />
                                      ]
                            }
                            content={
                                <div className={styles['content']}>
                                    {isRequestPending ? (
                                        <Alert
                                            message={t('viewDependents.pendingVerification')}
                                            className={styles['Alert']}
                                        />
                                    ) : (
                                        <Dependent nationalId={nationalId} dependentDetail={dependentDetail} />
                                    )}
                                </div>
                            }
                        />
                    </Col>
                )
            })}
            <Col span={8} className={styles['Col']}>
                <Button additions={['add-new-dependent']} type="dashed" icon="plus-circle" onClick={goToAddDependent}>
                    {t('viewDependents.addDependent')}
                </Button>
            </Col>
        </Row>
    )
}