import DataTable, { Column } from '@/components/costum/DataTable';
import PageHeader from '@/components/costum/page_header';
import { formatDate, formatNumber } from '@/helper';
import { TransaksiKasModel } from '@/types';
import { useDetailKas, useTransaksiKas } from '@/useQuery/query';
import { ArrowLeft } from 'lucide-react';
import { useState } from 'react';
import { Link, useParams } from 'react-router';

export default function StatementTransaksiKasPage() {
    const { id } = useParams();
    const detailKas = useDetailKas(id);

    const [filter, setFilter] = useState({
        tgl_awal: formatDate(detailKas.data?.created_at ?? new Date()),
        tgl_akhir: formatDate(new Date()),
        rekening: id,
    });

    const transaksiKas = useTransaksiKas(filter);

    let saldoAkhir = 0;

    const columns: Column<TransaksiKasModel>[] = [
        {
            label: <center>Tanggal</center>,
            width: 100,
            align: 'center',
            value: (row: TransaksiKasModel) => formatDate(row.trans_tglbuku),
        },
        {
            label: <center>Kode</center>,
            width: 100,
            align: 'center',
            value: (row: TransaksiKasModel) => row.trans_kode,
        },
        {
            label: 'Keterangan',
            value: (row: TransaksiKasModel) => row.keterangan,
        },
        {
            label: <center>Masuk</center>,
            width: 120,
            align: 'right',
            value: (row: TransaksiKasModel) => formatNumber(row.masuk),
        },
        {
            label: <center>Keluar</center>,
            width: 120,
            align: 'right',
            value: (row: TransaksiKasModel) => formatNumber(row.keluar),
        },
        {
            label: <center>Saldo Akhir</center>,
            width: 120,
            align: 'right',
            value: (row: TransaksiKasModel) => {
                saldoAkhir += (row?.masuk ?? 0) - (row?.keluar ?? 0);
                return formatNumber(saldoAkhir);
            },
        },
    ];

    return (
        <>
            <div className="container">
                <PageHeader
                    title="Statement Transaksi Kas"
                    breadcrumb={[
                        {
                            title: 'Kas',
                            path: '/app/master/kas',
                        },
                        {
                            title: `${id}`,
                            path: `/app/master/kas/${id}`,
                        },
                    ]}
                />
                <div className="row mb-2">
                    <div className="col-md-6">
                        <div className="row">
                            <label className="col-form-label col-md-2">Periode</label>
                            <div className="col-md-8">
                                <div className="input-group">
                                    <input
                                        className="form-control"
                                        type="date"
                                        value={filter.tgl_awal}
                                        onChange={(e) => setFilter({ ...filter, tgl_awal: e.target.value })}
                                    />
                                    <span className="input-group-text">Sampai</span>
                                    <input
                                        className="form-control"
                                        type="date"
                                        value={filter.tgl_akhir}
                                        onChange={(e) => setFilter({ ...filter, tgl_akhir: e.target.value })}
                                    />
                                </div>
                            </div>
                            <div className="col-md-2">
                                <div className="d-flex">
                                    <button className="btn btn-primary flex-grow-1">Preview</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="mb-2">
                    <DataTable
                        data={transaksiKas.data?.filter((item: TransaksiKasModel) => item.status == 1) || []}
                        column={columns}
                        pagination={false}
                        height={500}
                    />
                </div>
                <div>
                    <Link to={`/app/master/kas/${id}`} className="btn btn-danger">
                        <div className="d-flex align-items-center gap-2">
                            <ArrowLeft size={18} />
                            Kembali
                        </div>
                    </Link>
                </div>
            </div>
        </>
    );
}