// react
import React, { FunctionComponent } from "react";
// third-party
import { FormattedMessage } from "react-intl";
// application
import AppLink from "~/components/shared/AppLink";
import { IFooterSocialLink } from "~/interfaces/footerSettings";

type Props = React.HTMLAttributes<HTMLElement> & {
    socialSectionTitle: string;
    socialLinks: IFooterSocialLink[];
};

function getOutlinedSocialIconClass(type: string): string {
    const t = (type || "").toLowerCase().trim();
    switch (t) {
        case "facebook":
            return "ri-facebook-circle-line";
        case "instagram":
            return "ri-instagram-line";
        case "youtube":
            return "ri-youtube-line";
        case "tiktok":
            return "ri-tiktok-line";
        case "linkedin":
            return "ri-linkedin-box-line";
        case "twitter":
            return "ri-twitter-x-line";
        case "whatsapp":
            return "ri-whatsapp-line";
        default:
            return "ri-share-line";
    }
}

const FooterNewsletter: FunctionComponent<Props> = (props) => {
    const { socialSectionTitle, socialLinks, className } = props;

    const visibleLinks = socialLinks.filter((l) => l.url && l.url.trim() !== "");

    return (
        <div className={`footer-newsletter ${className || ""}`.trim()}>
            <h5 className="footer-newsletter__title">
                {socialSectionTitle && socialSectionTitle.trim() !== "" ? (
                    socialSectionTitle
                ) : (
                    <FormattedMessage id="TEXT_SOCIAL_LINKS_MESSAGE" />
                )}
            </h5>
            {/* <div className="footer-newsletter__text">
                <FormattedMessage id="TEXT_NEWSLETTER_MESSAGE" />
            </div>

            <form className="footer-newsletter__form" onSubmit={handleFormSubmit}>
                <label className="sr-only" htmlFor="footer-newsletter-address">
                    <FormattedMessage id="INPUT_EMAIL_ADDRESS_LABEL" />
                </label>
                <input
                    id="footer-newsletter-address"
                    type="text"
                    className="footer-newsletter__form-input"
                    placeholder={intl.formatMessage({ id: 'INPUT_EMAIL_ADDRESS_PLACEHOLDER' })}
                />
                <button
                    type="submit"
                    className="footer-newsletter__form-button"
                >
                    <FormattedMessage id="BUTTON_SUBSCRIBE" />
                </button>
            </form> */}

            {/* <div className="footer-newsletter__text footer-newsletter__text--social">
                <FormattedMessage id="TEXT_SOCIAL_LINKS_MESSAGE" />
            </div> */}

            <div className="footer-newsletter__social-links social-links">
                <ul className="social-links__list">
                    {visibleLinks.map((link, index) => (
                        <li key={index} className={`social-links__item social-links__item--${link.type}`}>
                            <AppLink href={link.url} target="_blank" rel="noopener noreferrer">
                                <i className={getOutlinedSocialIconClass(link.type)} />
                            </AppLink>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default FooterNewsletter;