import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state";
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state";
import { observer } from "mobx-react-lite";


const getStepStyle = (active: boolean) => ({
    borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
    textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
    bgColor: active ? "#00879E" : "#D1D5DB",
    iconText: active ? "text-[#00879E]" : "text-gray-400",
    opacity: active ? "opacity-100" : "opacity-30"
});

interface Props {
   mainState: PricePlanDetailState
   formState: RatePlanFormState
}

const CreateRatePlan = observer(({
    mainState,
    formState
}: Props) => {
    const isRatePlanActive = mainState.getFlow() >= 1;
    const isPriceActive = mainState.getFlow() >= 2;

    const ratePlanStyle = getStepStyle(isRatePlanActive);
    const priceStyle = getStepStyle(isPriceActive);

    return (
        <>
            <div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
                <div
                    className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
                    style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
                    onClick={() => {
                        formState.setOpen(true)
                    }}
                >
                    <svg
                        className={`w-10 h-10 ${ratePlanStyle.iconText}`}
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        viewBox="0 0 24 24"
                    >
                        <path d="M4 4h16v16H4V4z" />
                        <path d="M8 8h8M8 12h8M8 16h8" />
                    </svg>
                    <span
                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
                        style={{ backgroundColor: ratePlanStyle.bgColor }}
                    >
                        +
                    </span>
                </div>
                <span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
                    Rate Plan
                </span>
            </div>

            <div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
                →
            </div>

            <div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
                <div
                    className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
                    style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
                >
                    <svg
                        className={`w-10 h-10 ${priceStyle.iconText}`}
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        viewBox="0 0 24 24"
                    >
                        <path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
                    </svg>
                    <span
                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
                        style={{ backgroundColor: priceStyle.bgColor }}
                    >
                        +
                    </span>
                </div>
                <span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
                    Price
                </span>
            </div>
        </>
    );
})

export default CreateRatePlan