import { ITopContentItem, sendTrackingData } from '@rh-support/api';
import '@patternfly/pfe-accordion/pfe-accordion.umd';
import map from 'lodash/map';
import React from 'react';

interface IProps {
    name: string;
    items: ITopContentItem[];
    guid: string;
}

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'pfe-accordion': PfeAccordionProps;
            'pfe-accordion-header': PfeAccordionHeaderProps;
            'pfe-accordion-panel': PfeAccordionPanelProps;
        }
    }
}

interface PfeAccordionProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
    theme?: string;
    color?: string;
    on?: string;
}

interface PfeAccordionHeaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> { }

interface PfeAccordionPanelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> { }

export default function TopContent(props: IProps) {
    const sendTracking = (title: string, link: string) => () => {
        sendTrackingData('url_visited_top_problems', [title, link], props.guid);
    };

    const renderPanel = () => (
        <pfe-accordion-panel>
            <ul className="list-flushleft">
                {map(props.items, (item, i) => (
                    <li key={i + item.title}>
                        <p>
                            <a className="se-recommended ts-top-problems" onClick={sendTracking(item.title, item.url)} href={`${item.url}?band=se`} target="_blank">{item.title}</a>
                        </p>
                    </li>
                ))}
            </ul>
        </pfe-accordion-panel>
    );

    const renderHeader = () => (
        <pfe-accordion-header>
            <h3>{props.name}</h3>
        </pfe-accordion-header>
    );

    return (
        <div>
            {renderHeader()}
            {renderPanel()}
        </div>
    );
}
