"use client"
import React, { useState } from "react";
import { Helper } from "../library/prototype";
Helper();
const formatter = new Intl.NumberFormat('id', {
    style: 'currency',
    currency: 'IDR',
});

const toNumber = function (formattedString){
    return Number(
        formattedString.replace(/[^0-9.-]+/g, '')
    );
}

const num = function(a){
    let n = formatter.format(a);
    return n.replace(/\Rp /g, '')
}

export default function SimulasiKPR(){

    const [harga , setHarga] = useState(500000000);
    const [uangmuka , setUangMuka] = useState(10);
    const [jangkawaktu , setJangkaWaktu] = useState(10);
    const [sukubunga , setSukuBunga] = useState(10);


    return (<>
        <div className="py-10 px-4 md:px-2 lg:px-10">
            <div className="my-5">
                <h1 className="text-center text-2xl">Simulasi KPR - Kalkulator Kredit Rumah</h1>
                <p className="text-center">Gunakan kalkulator KPR untuk mendapatkan kemudahan pinjaman kredit rumah, perbandingan suku bunga cicilan bank di Indonesia</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
                <div className="col-span-1 md:col-span-2">
                    <div className="bg-white border-t-4 border-[#F49619] rounded-3xl drop-shadow-xl">
                        <div className="p-5">
                            <label className="block my-2">Harga Properti</label>
                            <div style={{overflow:'hidden', borderRadius:'8px', display:'grid', gridTemplateColumns:'50px auto', border:'1px solid #ddd'}}>
                                <div className="h-full flex justify-center items-center bg-gray-200">Rp</div>
                                <div className="h-full px-5">
                                    <input type="text" value={harga.currency()} onChange={(e)=>{
                                        setHarga(e.target.value.number())
                                    }} className="h-[28px] w-full" style={{border:'none',outline:'none'}} />
                                </div>
                            </div>
                            <label className="block my-2">Uang Muka</label>
                            <div className="mb-3" style={{overflow:'hidden', borderRadius:'8px', display:'grid', gridTemplateColumns:'auto 50px', border:'1px solid #ddd'}}>
                                <div className="h-full px-5">
                                    <input value={uangmuka} onChange={(e) => {
                                        setUangMuka(e.target.value)
                                    }} type="number" className="h-[28px] w-full" style={{border:'none',outline:'none'}} />
                                </div>
                                <div className="h-full flex justify-center items-center bg-gray-200">%</div>
                            </div>
                            <div style={{overflow:'hidden', borderRadius:'8px', display:'grid', gridTemplateColumns:'50px auto', border:'1px solid #ddd'}}>
                                <div className="h-full flex justify-center items-center bg-gray-200">Rp</div>
                                <div className="h-full px-5 bg-gray-100">
                                    <input value={(harga * uangmuka / 100).currency()} disabled={true} type="text" className="bg-gray-100 h-[28px] w-full" style={{border:'none',outline:'none'}} />
                                </div>
                            </div>
                            <label className="block my-2">Jangka Waktu</label>
                            <div style={{overflow:'hidden', borderRadius:'8px', display:'grid', gridTemplateColumns:'auto 80px', border:'1px solid #ddd'}}>
                                <div className="h-full px-5">
                                    <input value={jangkawaktu} onChange={(e) => {
                                        setJangkaWaktu(e.target.value)
                                    }} type="number" className="h-[28px] w-full" style={{border:'none',outline:'none'}} />
                                </div>
                                <div className="h-full flex justify-center items-center bg-gray-200">Tahun</div>
                            </div>
                            <label className="block my-2">Suku Bunga Fix</label>
                            <div style={{overflow:'hidden', borderRadius:'8px', display:'grid', gridTemplateColumns:'auto 50px', border:'1px solid #ddd'}}>
                                <div className="h-full px-5">
                                    <input value={sukubunga} onChange={(e) => {
                                        setSukuBunga(e.target.value)
                                    }} type="number" className="h-[28px] w-full" style={{border:'none',outline:'none'}} />
                                </div>
                                <div className="h-full flex justify-center items-center bg-gray-200">%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-span-1 md:col-span-3">

                    <div className="grid grid-cols-1 gap-4">
                        <div className="bg-gray-200 p-3 text-center rounded-xl drop-shadow">
                            <h1 className="p-4 font-medium">Angsuran / Bulan</h1>
                            <div className="px-4">
                                <div className="py-4 border-t-[1px] border-[#2951a3]">
                                    <p className="font-bold text-lg leading-6 text-[#2951a3]">{(function(){
                                        let pinjaman_pokok = harga - (uangmuka * harga / 100);
                                        let jangkawaktu_bulan = jangkawaktu * 12;
                                        let sukubunga_bulan = (sukubunga / 100) / 12;
                                        let a = pinjaman_pokok * sukubunga_bulan;
                                        let b = Math.pow((1 + sukubunga_bulan), jangkawaktu_bulan);
                                        let angsuranPerBulan = a * (b / (b - 1));
                                        return formatter.format( Math.round(angsuranPerBulan,0));
                                    })()}</p>
                                </div>
                            </div>
                        </div>
                        <div className="bg-gray-200 p-3 text-center rounded-xl drop-shadow">
                            <h1 className="p-4 font-medium">Pinjaman Pokok</h1>
                            <div className="px-4">
                                <div className="py-4 border-t-[1px] border-[#2951a3]">
                                    <p className="font-bold text-lg leading-6 text-[#2951a3]">{(function () {
                                        let pinjaman_pokok = harga - (uangmuka * harga / 100);
                                        let jangkawaktu_bulan = jangkawaktu * 12;
                                        let sukubunga_bulan = (sukubunga / 100) / 12;
                                        let a = pinjaman_pokok * sukubunga_bulan;
                                        let b = Math.pow((1 + sukubunga_bulan), jangkawaktu_bulan);
                                        let angsuranPerBulan = a * (b / (b - 1));
                                        return formatter.format(Math.round(pinjaman_pokok, 0));
                                    })()}</p>
                                </div>
                            </div>
                        </div>
                        <div className="bg-gray-200 p-3 text-center rounded-xl drop-shadow">
                            <h1 className="p-4 font-medium">Pembayaran Pertama</h1>
                            <div className="px-4">
                                <div className="py-4 border-t-[1px] border-[#2951a3]">
                                    <p className="font-bold text-lg leading-6 text-[#2951a3]">{(function () {
                                        let uang_muka = (uangmuka * harga / 100);
                                        let pinjaman_pokok = harga - (uangmuka * harga / 100);
                                        let jangkawaktu_bulan = jangkawaktu * 12;
                                        let sukubunga_bulan = (sukubunga / 100) / 12;
                                        let a = pinjaman_pokok * sukubunga_bulan;
                                        let b = Math.pow((1 + sukubunga_bulan), jangkawaktu_bulan);
                                        var angsuranPerBulan = a * (b / (b - 1));
                                        var pembayaranPertama = uang_muka + angsuranPerBulan + ((6 / 100) * pinjaman_pokok); 
                                        return formatter.format(Math.round(pembayaranPertama, 0));
                                    })()}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>)
}