import React from 'react';
import { ListBox } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import startCase from 'lodash/startCase';
import { EMPTY_CHAR } from 'src/constants';
import { INTL_PREFIX } from './potentialAudioInfringementModal';

interface Props {
    upc?: string;
    matchType?: string;
    className?: string;
    oaTrackLink?: string;
    songwhipLinks?: object | null;
}

const getDspLabel = (dsp: string) => {
    switch (dsp.toLowerCase()) {
        case 'youtube':
            return 'YouTube';
        case 'itunes':
            return 'iTunes';
        default:
            return startCase(dsp);
    }
};

const DspList = ({
    upc,
    matchType,
    oaTrackLink,
    songwhipLinks,
    className,
}: Props) => {
    const isExternal = matchType === 'external';
    const options = isExternal
        ? Object.entries(songwhipLinks ?? {}).map(([dsp, links]) => {
              return {
                  label: getDspLabel(dsp),
                  value: links[0].link,
              };
          })
        : [
              {
                  label: upc ?? EMPTY_CHAR,
                  value: oaTrackLink,
              },
          ];

    return (
        <ListBox
            data-testid={`${className}-expandedRow`}
            className={`${className}-expandedRow`}
            bordered
            options={options}
            maxHeight={220}
            hideFilter
            variant="static"
            components={{
                OptionLabel: ({ option }) => {
                    return (
                        <div
                            data-testid={`${className}-dspRow-${option.label}`}
                            className={`${className}-dspRow`}
                        >
                            <span className={`${className}-dspLabel`}>
                                {option.label}
                            </span>
                            <a
                                href={option.value}
                                rel="noreferrer"
                                target="_blank"
                            >
                                <span className={`${className}-dspLink`}>
                                    {$t(`${INTL_PREFIX}.link`)}
                                </span>
                                <GlyphIcon size={12} name="externalLink" />
                            </a>
                        </div>
                    );
                },
            }}
        />
    );
};

export default DspList;