import React from 'react';
import './styles/LinkCard.scss';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import Icon from '../icon/Icon';
import { ALIGNMENT_OPTIONS_ENUM, linkCardShape } from '../../constants/components/link-section';
import { generateUniqueID } from '../../tools/helpers';


const n = createNamespace('LinkCard');

export const LinkCard = ({
    linkCard: {
        linkInfo,
        header: {
            name,
            navigationLabel,
            iconType
        }
    },
    linkCardProps: {
        cornerRadius,
        imageColor,
        alignment,
        tileColor
    }
}) => {
    const renderLink = (text, link) => (
        <li {...n('linkItem').props} key={generateUniqueID([text, link])}>
            <a {...n('link').withTestId().props} href={link}>
                {text}
            </a>
        </li>
    );
    const linkCardStyle = {
        borderRadius: `${cornerRadius} ${cornerRadius} 0 0`,
        backgroundColor: imageColor
    };

    const textSectionStyle = {
        borderRadius: `0 0 ${cornerRadius} ${cornerRadius}`,
        backgroundColor: tileColor,
        textAlign: alignment
    };

    return (
        <article {...n('container').withTestId().props}>
            <div {...n('card').withTestId().props} style={linkCardStyle}>
                <Icon {...n('icon').withTestId().props} type={iconType} />
            </div>
            <nav
                {...n('linksSection').withTestId().props}
                style={textSectionStyle}
                aria-label={navigationLabel}
            >
                <h2 {...n('linkHeader').withTestId().props}>
                    {name}
                </h2>
                <ul {...n('list').withTestId().props}>
                    {linkInfo.map(({ text, link }) => renderLink(text, link))}
                </ul>
            </nav>
        </article>
    );
};

LinkCard.propTypes = {
    cornerRadius: PropTypes.number,
    linkCardProps: PropTypes.shape({
        cornerRadius: PropTypes.string,
        imageColor: PropTypes.string,
        tileColor: PropTypes.string,
        alignment: PropTypes.oneOf(ALIGNMENT_OPTIONS_ENUM)
    }),
    linkCard: PropTypes.shape(linkCardShape)
};

LinkCard.defaultProps = {
    cornerRadius: 8,
    linkCardProps: {
        cornerRadius: '5px',
        imageColor: '#00769D',
        tileColor: '#FFFFF',
        alignment: 'left'
    },
    linkCard: {
        linkInfo: [
            {
                text: 'Manage your account',
                link: '#'
            },
            {
                text: 'Change your password',
                link: '#'
            },
            {
                text: 'Profile settings',
                link: '#'
            }
        ],
        header: {
            name: 'Account',
            navigationLabel: 'Account navigation links',
            iconType: 'user'
        }
    }
};
export default LinkCard;
