import { useRef, useState } from "react";
import { Modal, Button, Row, Col } from "react-bootstrap"

type Props = {
    isOpen: boolean,
    onClose: () => void,
}

type Result = {
    pizza1?: {
        diameter?: number,
        area?: number,
        pricePerM?: number,
    },
    pizza2?: {
        diameter?: number,
        area?: number,
        pricePerM?: number,
    }
    choice?: number,
    ratio?: number,
    diameterDiff?: number,
}

/** Modální dialog pro výpočet výhodnosti pizzy. */
export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props>) {
    const diameter1Ref = useRef<HTMLInputElement>(null);
    const price1Ref = useRef<HTMLInputElement>(null);
    const diameter2Ref = useRef<HTMLInputElement>(null);
    const price2Ref = useRef<HTMLInputElement>(null);

    const [result, setResult] = useState<Result | null>(null);

    const recalculate = () => {
        const r: Result = { ...result }

        // 1. pizza
        if (diameter1Ref.current?.value) {
            const diameter1 = parseInt(diameter1Ref.current?.value);
            if (!r.pizza1) {
                r.pizza1 = {};
            }
            if (diameter1 && diameter1 > 0) {
                r.pizza1.diameter = diameter1;
                r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2);
                if (price1Ref.current?.value) {
                    const price1 = parseInt(price1Ref.current?.value);
                    if (price1) {
                        r.pizza1.pricePerM = price1 / r.pizza1.area;
                    } else {
                        r.pizza1.pricePerM = undefined;
                    }
                }
            } else {
                r.pizza1.area = undefined;
            }
        }

        // 2. pizza
        if (diameter2Ref.current?.value) {
            const diameter2 = parseInt(diameter2Ref.current?.value);
            if (!r.pizza2) {
                r.pizza2 = {};
            }
            if (diameter2 && diameter2 > 0) {
                r.pizza2.diameter = diameter2;
                r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2);
                if (price2Ref.current?.value) {
                    const price2 = parseInt(price2Ref.current?.value);
                    if (price2) {
                        r.pizza2.pricePerM = price2 / r.pizza2.area;
                    } else {
                        r.pizza2.pricePerM = undefined;
                    }
                }
            } else {
                r.pizza2.area = undefined;
            }
        }

        // Srovnání
        if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) {
            r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2;
            const bigger = r.pizza1.pricePerM > r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
            const smaller = r.pizza1.pricePerM < r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
            r.ratio = (bigger / smaller) - 1;
            r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter);
        } else {
            r.choice = undefined;
            r.ratio = undefined;
            r.diameterDiff = undefined;
        }
        setResult(r);
    }

    const close = () => {
        setResult(null);
        onClose();
    }

    return <Modal show={isOpen} onHide={onClose}>
        <Modal.Header closeButton>
            <Modal.Title>Pizza kalkulačka</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>Zadejte parametry pizzy pro jejich srovnání.</p>
            <Row>
                <Col size="6">
                    <input className="mb-3" ref={diameter1Ref} type="number" step="1" min="1" placeholder="Průměr 1. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
                </Col>
                <Col size="6">
                    <input className="mb-3" ref={diameter2Ref} type="number" step="1" min="1" placeholder="Průměr 2. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
                </Col>
            </Row>
            <Row>
                <Col size="6">
                    <input className="mb-3" ref={price1Ref} type="number" min="1" placeholder="Cena 1. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
                </Col>
                <Col size="6">
                    <input className="mb-3" ref={price2Ref} type="number" min="1" placeholder="Cena 2. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
                </Col>
            </Row>
            <Row>
                <Col size="6">
                    {result?.pizza1?.area && <p>Plocha: <b>{Math.round(result.pizza1.area * 10) / 10}</b> cm²</p>}
                    {result?.pizza1?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza1.pricePerM * 1000000) / 100}</b> Kč</p>}
                </Col>
                <Col size="6">
                    {result?.pizza2?.area && <p>Plocha: <b>{Math.round(result.pizza2.area * 10) / 10}</b> cm²</p>}
                    {result?.pizza2?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza2.pricePerM * 1000000) / 100}</b> Kč</p>}
                </Col>
            </Row>
            {(result?.choice && result?.ratio && result?.ratio > 0 && result?.diameterDiff != null && <p><b>{result.choice}. pizza</b> je zhruba o <b>{Math.round(result.ratio * 1000) / 10}%</b> výhodnější než {result.choice === 1 ? "2" : "1"}. pizza.</p>) || ''}
        </Modal.Body>
        <Modal.Footer>
            <Button variant="primary" onClick={close}>
                Zavřít
            </Button>
        </Modal.Footer>
    </Modal>
}