import React from 'react';
import './styles/LinkCard.scss';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import Icon from '../icon/Icon';

const n = createNamespace('LinkCard');

export const LinkCard = ({
    linkCard: {
        linkInfo,
        header: {
            name
        }
    },
    iconType,
    linkCardProps: {
        cornerRadius,
        imageColor,
        alignment,
        tileColor
    }
}) => {
    const renderLink = (text, link) => (
        <a {...n('link').withTestId().props} key={text} href={link}>
            {text}
        </a>
    );
    const linkCardStyle = {
        borderRadius: `${cornerRadius} ${cornerRadius} 0 0`,
        backgroundColor: imageColor
    };
    const paddingValues = {
        left: '18px 0px 0px 36px',
        right: '18px 36px 0px 0px',
        center: '18px 0px 0px 0px'
    };

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

    return (
        <div {...n('container').withTestId().props}>
            <div {...n('card').withTestId().props} style={linkCardStyle}>
                <Icon {...n('icon').withTestId().props} type={iconType} />
            </div>
            <div {...n('textSection').withTestId().props} style={textSectionStyle}>
                <p {...n('linkHeader').withTestId().props}>
                    {name}
                </p>
                <div {...n('list').withTestId().props}>
                    {linkInfo.map(({ text, link }) => renderLink(text, link))}
                </div>
            </div>
        </div>
    );
};

LinkCard.propTypes = {
    iconType: PropTypes.string,
    cornerRadius: PropTypes.number,
    linkCardProps: PropTypes.shape({
        cornerRadius: PropTypes.string,
        imageColor: PropTypes.string,
        tileColor: PropTypes.string,
        alignment: PropTypes.string
    }),
    linkCard: PropTypes.shape({
        linkInfo: PropTypes.arrayOf(
            PropTypes.shape({
                text: PropTypes.string,
                link: PropTypes.string
            })
        ),
        header: PropTypes.shape({
            name: PropTypes.string
        })
    })
};

LinkCard.defaultProps = {
    iconType: 'user',
    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'
        }
    }
};
export default LinkCard;
