/* eslint-disable jsx-a11y/control-has-associated-label */
import React, { FC } from 'react';
import { range } from 'lodash';
import { LoaderWrapper, Table } from '@orchard/frontend-react-components';
import Metric from 'src/components/metric';
import { formatMessage } from '@orchard/frontend-localization';
import SeriesIcon from 'src/components/seriesIcon';
import { SKIPS, STREAMS, SAVES, DOWNLOADS } from 'src/constants/graphs';
import cx from 'classnames';

export interface PerformanceSummary {
    name: string;
    streams: number | null;
    downloads: number | null;
    skipRate: number | null;
    saves: number | null;
}

export interface Props {
    loading: boolean;
    count: number;
    values: PerformanceSummary[];
    potMetric: string;
}

export interface TableCellProps {
    loading?: boolean;
    children: JSX.Element;
    selected?: boolean;
}

export const CLASSNAME = 'MetricsTable';
const CLASSNAME_SELECTED = `${CLASSNAME}-selected`;
export const METRIC_TEST_ID = (i: number, type: string) => `${CLASSNAME}-${type}-${i}`;

const TableCell: FC<TableCellProps> = ({ loading = false, children, selected = false }) => {
    const content = loading ? <LoaderWrapper numberOfItems={1} /> : children;
    return <td className={cx({ [CLASSNAME_SELECTED]: selected })}>{content}</td>;
};

const MetricsTable: FC<Props> = ({ loading, count, values, potMetric }) => (
    <Table className={CLASSNAME}>
        <thead>
            <tr>
                <th />
                <th>{formatMessage('comparison.song')}</th>
                <th className={cx({ [CLASSNAME_SELECTED]: potMetric === STREAMS })}>{formatMessage('comparison.streams')}</th>
                <th className={cx({ [CLASSNAME_SELECTED]: potMetric === DOWNLOADS })}>{formatMessage('comparison.downloads')}</th>
                <th className={cx({ [CLASSNAME_SELECTED]: potMetric === SAVES })}>{formatMessage('comparison.savesToCollection')}</th>
                <th className={cx({ [CLASSNAME_SELECTED]: potMetric === SKIPS })}>{formatMessage('comparison.skipRate')}</th>
            </tr>
        </thead>
        <tbody>
            {range(count).map(i => (
                <tr key={i}>
                    <TableCell>
                        <SeriesIcon index={i} />
                    </TableCell>
                    <TableCell loading={loading}>
                        <span>{values[i] && values[i].name}</span>
                    </TableCell>
                    <TableCell selected={potMetric === STREAMS} loading={loading}>
                        <Metric value={values[i] && values[i].streams} testId={METRIC_TEST_ID(i, STREAMS)} />
                    </TableCell>
                    <TableCell selected={potMetric === DOWNLOADS} loading={loading}>
                        <Metric value={values[i] && values[i].downloads} testId={METRIC_TEST_ID(i, DOWNLOADS)} />
                    </TableCell>
                    <TableCell selected={potMetric === SAVES} loading={loading}>
                        <Metric value={values[i] && values[i].saves} testId={METRIC_TEST_ID(i, SAVES)} />
                    </TableCell>
                    <TableCell selected={potMetric === SKIPS} loading={loading}>
                        <Metric value={values[i] && values[i].skipRate} testId={METRIC_TEST_ID(i, SKIPS)} format="percentage" />
                    </TableCell>
                </tr>
            ))}
        </tbody>
        <tfoot>
            <tr>
                <td />
                <td />
                <td className={cx({ [CLASSNAME_SELECTED]: potMetric === STREAMS })} />
                <td className={cx({ [CLASSNAME_SELECTED]: potMetric === DOWNLOADS })} />
                <td className={cx({ [CLASSNAME_SELECTED]: potMetric === SAVES })} />
                <td className={cx({ [CLASSNAME_SELECTED]: potMetric === SKIPS })} />
            </tr>
        </tfoot>
    </Table>
);

export default MetricsTable;