import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import withListener from '../../../withListener';

import { headerAnnouncementBarDefaultSettings, headerAnnouncementBarSchemaForm } from '../../../../constants/components/schemas/header';
import { headerAnnouncementBarSettingsShape } from '../../../../constants/components/prop-types/header';
import { TARGET_BLANK } from '../../../../constants/buttons';
import { splitStringByDelimiters } from '../../../../tools/stringTools';

import Link from '../../../../atoms/link/Link';

import './styles/HeaderAnnouncementBar.scss';

const n = createNamespace('HeaderAnnouncementBar');

const HeaderAnnouncementBar = ({
    settings
}) => {
    const settingsWithDefaults = {
        ...HeaderAnnouncementBar.defaultProps.settings,
        ...settings
    };

    const {
        announcementBarMessage: message,
        announcementBarLink: messageLink,
        announcementBarOpenInNewTab: isTargetBlank,
        announcementBarHeight,
        announcementBarTextAlignment,
        announcementBarTextSize,
        announcementBarTextColor,
        announcementBarLinkTextColor,
        announcementBarBorderColor,
        announcementBarBackgroundColor
    } = settingsWithDefaults;
    if (!message) {
        return null;
    }

    const styles = {
        height: announcementBarHeight && `${announcementBarHeight}px`,
        'text-color': announcementBarTextColor,
        'link-color': announcementBarLinkTextColor,
        'border-color': announcementBarBorderColor,
        'background-color': announcementBarBackgroundColor
    };

    const wrapperModifiers = [
        announcementBarTextSize && `${announcementBarTextSize}-text`,
        announcementBarTextAlignment && `align-${announcementBarTextAlignment}`
    ];

    const renderMessage = () => {
        const splittedMessage = splitStringByDelimiters(message);

        if (messageLink && splittedMessage) {
            const [beforeLink, linkText, afterLink] = splittedMessage;
            return (
                <>
                    {beforeLink}
                    <Link
                        {...n('link').props}
                        href={messageLink}
                        target={isTargetBlank ? TARGET_BLANK : undefined}
                    >
                        {linkText}
                    </Link>
                    {afterLink}
                </>
            );
        }

        return message;
    };

    return (
        <div {...n('announcementBar').withTestId().props}>
            <div {...n('wrapper', wrapperModifiers).withVariables(styles).props}>
                <p {...n('message', announcementBarTextSize).withTestId().props}>{renderMessage()}</p>
            </div>
        </div>
    );
};

HeaderAnnouncementBar.schema = () => ({
    name: 'Header Announcement Bar',
    title: 'uieditor.sfbComponent.header.announcementBar.title',
    iconName: 'comment',
    form: headerAnnouncementBarSchemaForm
});

HeaderAnnouncementBar.propTypes = {
    settings: PropTypes.shape(headerAnnouncementBarSettingsShape)
};

HeaderAnnouncementBar.defaultProps = {
    settings: headerAnnouncementBarDefaultSettings
};

export default withListener(HeaderAnnouncementBar);
