import React from 'react';
import {
    Button,
    Col,
    Container,
    Label,
    Row,
    Section,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { isEmpty } from 'lodash-es';
import { Link } from 'react-router-dom';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { NO_PHYSICAL_RESERVES } from 'src/constants';
import {
    createPhysicalReserve,
    updatePhysicalReserve,
} from 'src/urls/frontend-royalties';
import type { CreateContractReserveMutation } from 'src/apollo/mutations/contract-reserve/__generated__/create-contract-reserve';

type AbacusCreateContractReserve =
    CreateContractReserveMutation['abacusCreateContractReserve'];

export interface PhysicalReserveProps {
    contractId: string;
    physicalReserve: AbacusCreateContractReserve | null;
}

export const ContractPhysicalReserve: React.FC<PhysicalReserveProps> = ({
    contractId,
    physicalReserve,
}) => {
    const formatReserveRate = (reserveRate: number) =>
        `${parseInt(reserveRate.toString(), 10)}%`;
    const formatMonths = (months: number) =>
        `${parseInt(months.toString(), 10)} Month${months > 1 ? 's' : ''}`;

    return (
        <Section
            className="ContractDetail-PhysicalReserve"
            testId="contractDetailPhysicalReserve"
        >
            <Section.Header>
                <div className="d-flex flex-column" style={{ width: '100%' }}>
                    <div className="d-flex flex-row align-items-center">
                        <Section.Title className="h3">
                            Physical Reserves
                        </Section.Title>
                        <RestrictedByAbacusProfileWrapper>
                            {isEmpty(physicalReserve) ? (
                                <Link
                                    className="ml-auto"
                                    data-testid="physicalReserveEditBtnTestId"
                                    to={createPhysicalReserve(contractId)}
                                >
                                    <Button variant="primary">
                                        <GlyphIcon name="plus" size={12} />
                                        Add
                                    </Button>
                                </Link>
                            ) : (
                                <Link
                                    className="ContractDetail-PhysicalReserve-Edit ml-auto"
                                    data-testid="physicalReserveEditBtnTestId"
                                    to={updatePhysicalReserve(contractId)}
                                >
                                    <GlyphIcon name="edit" size={16} />
                                </Link>
                            )}
                        </RestrictedByAbacusProfileWrapper>
                    </div>
                </div>
            </Section.Header>
            <Section.Body>
                <Section>
                    <Section.Body>
                        {physicalReserve && (
                            <div className="PhysicalReserve-details">
                                <Container>
                                    <Row>
                                        <Col xs={3}>
                                            <Label text="Reserve Rate" />
                                            {formatReserveRate(
                                                physicalReserve.reserveRate
                                            )}
                                        </Col>
                                        <Col xs={3}>
                                            <Label text="Number Of Installments" />
                                            {formatMonths(
                                                physicalReserve.installmentsInMonths
                                            )}
                                        </Col>
                                        <Col xs={6}>
                                            <Label text="First Installment of Reserves Released After" />
                                            {formatMonths(
                                                physicalReserve.reserveReleaseOffsetInMonths
                                            )}
                                        </Col>
                                    </Row>
                                </Container>
                            </div>
                        )}
                        {!physicalReserve && (
                            <div>
                                <span className="mb-2 text-muted">
                                    {NO_PHYSICAL_RESERVES}
                                </span>
                            </div>
                        )}
                    </Section.Body>
                </Section>
            </Section.Body>
        </Section>
    );
};