import React, { useState } from 'react';
import { GlyphButton, Modal } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { CONTRACT_TYPES } from 'src/constants';

export interface ContractHistoryReportsLinkProps {
    className: string;
    contractId: string;
    contractType: string;
}

export const ContractHistoryReportsLink: React.FC<
    ContractHistoryReportsLinkProps
> = ({ className, contractId, contractType }) => {
    const [isHistoryReportsModalOpen, setIsHistoryReportsModalOpen] =
        useState<boolean>(false);

    const generalReportLink = `https://theorchard.looker.com/looks/21866?f[royalty_accounting_prod_vw_fact_contract_history.contract_id]=${contractId}`;

    const termConditionsReportLink =
        contractType === CONTRACT_TYPES.DISTRIBUTION
            ? `https://theorchard.looker.com/looks/21868?f[royalty_accounting_prod_vw_fact_contract_history.contract_id]=${contractId}`
            : `https://theorchard.looker.com/looks/21867?f[royalty_accounting_prod_vw_fact_contract_history.contract_id]=${contractId}`;

    return (
        <>
            <GlyphButton
                className={`ContractDetail-top-${className}`}
                onClick={() => setIsHistoryReportsModalOpen(true)}
                variant="tertiary"
                name="clock"
                tooltip="History Reports"
                testId="contractHistoryReportsLink"
            />
            <Modal
                isOpen={isHistoryReportsModalOpen}
                className="ContractDetail-top-HistoryReportsModal"
                title={
                    <h3 className="ContractDetail-top-HistoryReportsModal-Header">
                        History Reports
                    </h3>
                }
                onRequestClose={() => {
                    setIsHistoryReportsModalOpen(false);
                }}
            >
                <div>
                    <p>
                        History reports will be generated outside of Abacus in
                        Looker.
                    </p>
                    <section className="ContractDetail-top-HistoryReportsModal-Links">
                        <div className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer">
                            <a
                                href={generalReportLink}
                                className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer-Link"
                                target="_blank"
                                rel="noreferrer"
                            >
                                <GlyphIcon
                                    name="externalLink"
                                    className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer-Link-Icon"
                                    size={16}
                                />
                                &nbsp;General Report
                            </a>
                        </div>
                        <div className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer">
                            <a
                                href={termConditionsReportLink}
                                className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer-Link"
                                target="_blank"
                                rel="noreferrer"
                            >
                                <GlyphIcon
                                    name="externalLink"
                                    className="ContractDetail-top-HistoryReportsModal-Links-LinkContainer-Link-Icon"
                                    size={16}
                                />
                                &nbsp;Terms &amp; Conditions Report
                            </a>
                        </div>
                    </section>
                </div>
            </Modal>
        </>
    );
};