import React from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { Product_product as Product } from 'src/queries/__definitions__/Product';
import ProductErrorGraphic from 'src/assets/product-error-graphic.svg';
import { getProductUrl } from 'src/urls/workstation';
import messages from './i18n';

const CLASS_NAME = 'ProductNoTracksPanel';

type Props = {
    product: Product;
};

const ProductNoTracksPanel: React.FC<Props> = ({ product: { productId, project } }) => {
    if (!project?.projectId) return null;

    const productBuilderURI = getProductUrl(project.projectId, productId);

    return (
        <div className={ CLASS_NAME }>
            <div className={ `${CLASS_NAME}-image-container` }>
                <img
                    alt=""
                    src={ ProductErrorGraphic }
                    className={ `${CLASS_NAME}-image` }
                />
            </div>
            <div className={ `${CLASS_NAME}-title` }>
                { formatMessage(messages.noTracksFoundTitle) }
            </div>
            <div className={ `${CLASS_NAME}-text-container` }>
                <div className={ `${CLASS_NAME}-text` }>
                    { formatMessage(messages.productNoTracksText) }
                    <span>
                        <a href={ productBuilderURI }>
                            { formatMessage(messages.clickHere) }
                        </a>
                    </span>
                </div>
            </div>
        </div>
    );
};

export default ProductNoTracksPanel;