import type { FC } from 'react';
import React from 'react';
import { createHref, useIdentity } from '@theorchard/suite-frontend';
import { Link } from 'react-router-dom';
import { EMPTY_CHAR, ROUTE_CATALOG_OSR } from 'src/constants';
import type { OrchardSoundRecordings } from 'src/data/queries/orchardSoundRecordings/types';
import type { FormattedTrack } from 'src/data/queries/track/selector';

export const PARENT_CLASS_NAME = 'TrackPage';
export const CLASS_NAME = `${PARENT_CLASS_NAME}-Views-RightsView`;

interface Props {
    track: FormattedTrack;
    orchardSoundRecordings: OrchardSoundRecordings;
}

const RightsView: FC<Props> = ({ track, orchardSoundRecordings }) => {
    const {
        isrc,
        ownershipRights,
        originalRightsHolderCountry,
        recordingCountry,
        pInfo,
    } = track;
    const { orchardSoundRecordings: osrs } = orchardSoundRecordings;
    const { roles } = useIdentity();

    const renderOsrIsrc = () => {
        if (!osrs.length) return <div>EMPTY_CHAR</div>;

        const { isrc, id } = osrs[0];
        const hasViewRole = roles?.includes('view_orchard_sound_recording');

        return hasViewRole ? (
            <div>
                <Link to={createHref(ROUTE_CATALOG_OSR, { osrId: id })}>
                    {isrc}
                </Link>
            </div>
        ) : (
            <div>{isrc}</div>
        );
    };

    return (
        <div className={CLASS_NAME}>
            <div className={`${CLASS_NAME}-info`}>
                <div className={`${CLASS_NAME}-info-title`}>
                    <p>{$t('digitalProducts.rightsView.info.title')}</p>
                </div>
                <div className={`${CLASS_NAME}-metadata`}>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-left`}>
                            {$t(`digitalProducts.rightsView.info.trackIsrc`)}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {isrc}
                        </div>
                    </div>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-right`}>
                            {$t(`digitalProducts.rightsView.info.pInfo`)}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {pInfo}
                        </div>
                    </div>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-left`}>
                            {$t(
                                `digitalProducts.rightsView.info.ownershipRights`
                            )}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {ownershipRights || EMPTY_CHAR}
                        </div>
                    </div>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-left`}>
                            {$t(`digitalProducts.rightsView.info.osrIsrc`)}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {renderOsrIsrc()}
                        </div>
                    </div>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-right`}>
                            {$t(
                                `digitalProducts.rightsView.info.recordingCountry`
                            )}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {recordingCountry || EMPTY_CHAR}
                        </div>
                    </div>
                    <div className={`${CLASS_NAME}-metadata-body`}>
                        <div className={`${CLASS_NAME}-metadata-header-left`}>
                            {$t(
                                `digitalProducts.rightsView.info.originalRights`
                            )}
                        </div>
                        <div className={`${CLASS_NAME}-metadata-data`}>
                            {originalRightsHolderCountry || EMPTY_CHAR}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RightsView;