import { Form, Tooltip } from '@theorchard/suite-components';
import { GlyphIcon, StoreIcon } from '@theorchard/suite-icons';
import React from 'react';
import { MarketingHighlightStore } from 'shared/data/schema';
import type { FC } from 'react';
import type { MarketingHighlight } from 'src/types';

export interface StoreMarketingHighlightsProps {
    editable: boolean;
    storeMarketingHighlights: MarketingHighlight[];
    setStoreMarketingHighlights: (value: MarketingHighlight[]) => void;
}

export const StoreMarketingHighlights: FC<StoreMarketingHighlightsProps> = ({
    editable,
    storeMarketingHighlights,
    setStoreMarketingHighlights,
}) => {
    const className = 'StoreMarketingHighlights';
    const i18nPrefix = 'marketingSection.storeMarketingHighlights';

    const appleStore = MarketingHighlightStore.MARKETING_HIGHLIGHTS_STORE_APPLE;
    const spotifyStore =
        MarketingHighlightStore.MARKETING_HIGHLIGHTS_STORE_SPOTIFY;

    const spotifyMarketingHighlights =
        storeMarketingHighlights?.find(e => e.store === spotifyStore)
            ?.marketingHighlight ?? '';
    const setSpotifyMarketingHighlights = (newHighlight: string) =>
        setStoreMarketingHighlights(
            storeMarketingHighlights?.map(item =>
                item.store === spotifyStore
                    ? { ...item, marketingHighlight: newHighlight }
                    : item
            ) ?? []
        );

    const appleMarketingHighlights =
        storeMarketingHighlights?.find(e => e.store === appleStore)
            ?.marketingHighlight ?? '';
    const setAppleMarketingHighlights = (newHighlight: string) =>
        setStoreMarketingHighlights(
            storeMarketingHighlights?.map(item =>
                item.store === appleStore
                    ? { ...item, marketingHighlight: newHighlight }
                    : item
            ) ?? []
        );

    return (
        <div className={className} data-testid="project-marketing-highlights">
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
            </div>
            <div className={`${className}-body`}>
                <div className={`${className}-spotify-highlights`}>
                    <div className={`${className}-spotify-header`}>
                        <StoreIcon
                            className={`${className}-apple-icon`}
                            name="spotify"
                        />
                        <div className={`${className}-spotify-title`}>
                            {$t(`${i18nPrefix}.spotifyTitle`)}
                        </div>
                        <Tooltip
                            className={`${className}-spotify-tooltip`}
                            id="store-marketing-highlights-spotify-tooltip"
                            testId="store-marketing-highlights-spotify-tooltip"
                            message={$t(`${i18nPrefix}.spotifyTooltip`)}
                            children={<GlyphIcon name="info" size={16} />}
                        />
                    </div>
                    <div className={`${className}-spotify-body`}>
                        {editable ? (
                            <Form.Control
                                className={`${className}-spotify-text-area`}
                                as="textarea"
                                rows={12}
                                value={spotifyMarketingHighlights}
                                disabled={!editable}
                                onChange={e =>
                                    setSpotifyMarketingHighlights(
                                        e?.target?.value ?? ''
                                    )
                                }
                            />
                        ) : (
                            <div className={`${className}-spotify-text`}>
                                {spotifyMarketingHighlights || '-'}
                            </div>
                        )}
                    </div>
                </div>
                <div className={`${className}-apple-highlights`}>
                    <div className={`${className}-apple-header`}>
                        <StoreIcon
                            className={`${className}-apple-icon`}
                            name="appleMusic"
                        />
                        <div className={`${className}-apple-title`}>
                            {$t(`${i18nPrefix}.appleTitle`)}
                        </div>
                        <Tooltip
                            className={`${className}-apple-tooltip`}
                            id="store-marketing-highlights-apple-tooltip"
                            testId="store-marketing-highlights-apple-tooltip"
                            message={$t(`${i18nPrefix}.appleTooltip`)}
                            children={<GlyphIcon name="info" size={16} />}
                        />
                    </div>
                    <div className={`${className}-apple-body`}>
                        {editable ? (
                            <Form.Control
                                className={`${className}-apple-text-area`}
                                as="textarea"
                                rows={12}
                                value={appleMarketingHighlights}
                                disabled={!editable}
                                onChange={e =>
                                    setAppleMarketingHighlights(
                                        e?.target?.value ?? ''
                                    )
                                }
                            />
                        ) : (
                            <div className={`${className}-apple-text`}>
                                {appleMarketingHighlights || '-'}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default StoreMarketingHighlights;