import { ButtonSubmit } from '@/components/costum/button_submit';
import { SelectTransaksiDeposito } from '@/components/costum/SelectTransaksiDeposito';
import { useModalBrowseRekeningDeposito } from '@/components/modal/modalBrowseRekeningDeposito';
import { useModalBrowseRekeningTabungan } from '@/components/modal/modalBrowseRekeningTabungan';
import { formatDate, formatTanggal, hitungJatuhTempo } from '@/helper';
import { Deposito, Tabungan, TransaksiDeposito } from '@/types';
import { ArrowLeft, Save } from 'lucide-react';
import { useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';

export default function FormTransaksiDepositoPage() {
    const [dataTransaksi, setDataTransaksi] = useState<TransaksiDeposito>({
        trans_tglbuku: formatDate(new Date()),
        tgl_valuta: formatDate(new Date()),
    });

    const modalRekeningDeposito = useModalBrowseRekeningDeposito({
        onSelected: (dep: Deposito) => {
            setDataTransaksi({ ...dataTransaksi, deposito: dep, nilai_valuta: dep.nilai_valuta });
        },
    });

    const modalRekeningTabungan = useModalBrowseRekeningTabungan({
        onSelected: (tab: Tabungan) => {
            setDataTransaksi({ ...dataTransaksi, tabungan: tab });
        },
    });

    useEffect(() => {
        if (dataTransaksi.deposito?.produk && dataTransaksi.tgl_valuta) {
            const tgl_jatuh_tempo = hitungJatuhTempo(dataTransaksi.tgl_valuta, dataTransaksi.deposito.produk.jkw!);
            setDataTransaksi((prev) => ({
                ...prev,
                tgl_jatuh_tempo: tgl_jatuh_tempo,
            }));
        }
    }, [dataTransaksi.deposito, dataTransaksi.tgl_valuta]);

    return (
        <div>
            <div className="container" style={{ width: 720 }}>
                <div className="card border-primary">
                    <div className="card-header bg-primary text-white">
                        <h5 className="mb-0">Transaksi Deposito</h5>
                    </div>
                    <div className="card-body">
                        <div className="form-group row mb-2">
                            <label className="col-form-label col-md-3">Tanggal</label>
                            <div className="col-md-4">
                                <div className="input-group">
                                    <input
                                        type="date"
                                        className="form-control text-center"
                                        value={dataTransaksi?.trans_tglbuku || ''}
                                        onChange={(e) => {
                                            setDataTransaksi({ ...dataTransaksi, trans_tglbuku: e.target.value });
                                        }}
                                    />
                                </div>
                            </div>
                            <label className="col-form-label col-md-5">
                                <i>{formatTanggal(dataTransaksi?.trans_tglbuku)}</i>
                            </label>
                        </div>
                        <div className="form-group row mb-2">
                            <label className="col-form-label col-md-3">Rekening</label>
                            <div className="col-md-5">
                                <div className="input-group">
                                    <input className="form-control" placeholder="Rekening" readOnly value={dataTransaksi?.deposito?.rekening || ''} />
                                    <button className="btn btn-primary" onClick={() => modalRekeningDeposito.open(0)}>
                                        Browse
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="data-anggota">
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Nama Anggota</label>
                                <div className="col-md-9">
                                    <input
                                        className="form-control"
                                        placeholder="Nama Anggota"
                                        readOnly
                                        value={dataTransaksi?.deposito?.anggota?.nama_lengkap || ''}
                                    />
                                </div>
                            </div>
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Alamat</label>
                                <div className="col-md-9">
                                    <input
                                        className="form-control"
                                        placeholder="Alamat"
                                        readOnly
                                        value={dataTransaksi?.deposito?.anggota?.alamat || ''}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3" />
                                <div className="col-md-3">
                                    <div className="input-group">
                                        <span className="input-group-text bg-white border-end-0">RT</span>
                                        <input
                                            className="form-control border-start-0 text-center"
                                            readOnly
                                            value={dataTransaksi?.deposito?.anggota?.rt || ''}
                                        />
                                    </div>
                                </div>
                                <div className="col-md-3">
                                    <div className="input-group">
                                        <span className="input-group-text bg-white border-end-0">RW</span>
                                        <input
                                            className="form-control border-start-0 text-center"
                                            readOnly
                                            value={dataTransaksi?.deposito?.anggota?.rw || ''}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div id="data-transaksi">
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Jenis Transaksi</label>
                                <div className="col-md-7">
                                    <SelectTransaksiDeposito
                                        value={dataTransaksi.trans_kode}
                                        onChange={(value: string) => {
                                            setDataTransaksi({ ...dataTransaksi, trans_kode: value });
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3">Jangka Waktu</label>
                                <div className="col-md-5">
                                    <input className="form-control" readOnly value={dataTransaksi?.deposito?.produk?.jkw || ''} />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-3">Tgl Valuta</label>
                                <div className="col-md-3">
                                    <input
                                        className="form-control"
                                        type="date"
                                        value={dataTransaksi?.tgl_valuta || ''}
                                        onChange={(e) => {
                                            setDataTransaksi({ ...dataTransaksi, tgl_valuta: e.target.value });
                                        }}
                                    />
                                </div>
                                <label className="col-form-label col-md-3 text-end">Tgl Jatuh Tempo</label>
                                <div className="col-md-3">
                                    <input className="form-control" type="date" value={dataTransaksi?.tgl_jatuh_tempo || ''} />
                                </div>
                            </div>
                            <hr />
                            <div className="form-group row mb-2">
                                <label className="col-form-label col-md-3">Valuta Deposito</label>
                                <div className="col-md-4">
                                    <div className="input-group">
                                        <span className="input-group-text bg-white border-end-0">Rp</span>
                                        <NumericFormat
                                            className="form-control border-start-0 text-end"
                                            readOnly
                                            thousandSeparator="."
                                            decimalSeparator=","
                                            value={dataTransaksi?.nilai_valuta || ''}
                                            onValueChange={(values) => {
                                                setDataTransaksi({ ...dataTransaksi, nilai_valuta: parseInt(values.value) });
                                            }}
                                        />
                                    </div>
                                </div>
                                <label className="col-form-label col-md-3 text-end">Bunga/Th</label>
                                <div className="col-md-2">
                                    <div className="input-group">
                                        <input className="form-control border-end-0" readOnly value={dataTransaksi?.deposito?.produk?.suku_bunga || ''} />
                                        <span className="input-group-text bg-white">%</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <hr className="mt-3" />
                                <div className="form-group row mb-2">
                                    <label className="col-form-label col-md-3">Rekening OB</label>
                                    <div className="col-md-5">
                                        <div className="input-group">
                                            <input
                                                className="form-control"
                                                placeholder="Rekening"
                                                readOnly
                                                value={dataTransaksi?.tabungan?.rekening || ''}
                                            />
                                            <button className="btn btn-primary" onClick={() => modalRekeningTabungan.open()}>
                                                Browse
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="data-anggota">
                                    <div className="form-group row mb-2">
                                        <label className="col-form-label col-md-3">Nama Rekening</label>
                                        <div className="col-md-9">
                                            <input
                                                className="form-control"
                                                placeholder="Nama Rekening"
                                                readOnly
                                                value={dataTransaksi?.tabungan?.anggota?.nama_lengkap || ''}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr className="mt-3" />
                            <div className="form-group row">
                                <label className="col-form-label col-md-3">Keterangan</label>
                                <div className="col-md-9">
                                    <input className="form-control" placeholder="Keterangan Transaksi" value={dataTransaksi?.keterangan || ''} />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="card-footer justify-content-between d-flex">
                        <button className="btn btn-danger align-items-center d-flex gap-2">
                            <ArrowLeft size={18} />
                            Kembali
                        </button>
                        <ButtonSubmit className="btn btn-success" icon={<Save size={18} />}>
                            Simpan
                        </ButtonSubmit>
                    </div>
                </div>
            </div>

            {modalRekeningTabungan.modal}
            {modalRekeningDeposito.modal}
        </div>
    );
}