import React from "react";
import moment from "moment";
import { Badge } from "../../lib/common/badge";
import { IRateByTruckGroup, TripCustomerPrice } from "./type";
import BookTruckDialog from "./bookTruckDialog";
import Nodata from "../../lib/common/nodata";
import util from "../../lib/util";


const RateByTruckGroup = (props: IRateByTruckGroup) => {
    const { cityPriceData, hasLoadMore, loading, loadMore, showBookLink, utmSource, showRatePerTon, translatedWords } = props;
    const { ton: tonLabel = 'Ton', loadMore: loadMoreLabel = 'Load more', noMoreData = 'No more data', noData } = translatedWords || {}

    const loadingComp = <div className='fr-flex fr-justify-center fr-items-center fr-pb-1'><span className="fr-loader"></span></div>
    return (
        <>
            {util.isEmptyArray(cityPriceData) && loading ? loadingComp : util.isEmptyArray(cityPriceData) ? <Nodata label={noData} /> :
                cityPriceData.map((cpd: TripCustomerPrice, index: number) => {
                    const { customer_price, source_id, source_name, branch_id, destination_id, destination_name, destination_branch_id, truck_type, ton, created_at } = cpd
                    const queryData = {
                        ext: true,
                        s_id: source_id,
                        s_n: source_name,
                        sb_id: branch_id,
                        d_id: destination_id,
                        d_n: destination_name,
                        db_id: destination_branch_id,
                        t_id: truck_type?.id,
                        t_n: truck_type?.web_name,
                        mt: ton,
                    };
                    return (
                        <div className={`${index % 2 === 0 ? '' : 'fr-bg-slate-50'}`} key={`${source_id}${index}`}>
                            <div className="sm:fr-flex sm:fr-items-center sm:fr-justify-between fr-px-3 fr-py-2 fr-border-b fr-border-slate-200">
                                <div>
                                    <div className="fr-text-slate-800 fr-font-medium fr-mb-1 fr-flex fr-items-center fr-gap-2">
                                        <Badge color="#16a34a" />{source_name}
                                        <Badge color="#dc2626" />{destination_name}
                                        <span className="fr-text-slate-600">{ton ? `- ${ton} ${tonLabel}` : ''}</span>
                                    </div>
                                    <div className="fr-text-sm fr-text-slate-600">
                                        {`${moment(created_at).format("DD-MMM-YY")} | ${truck_type?.web_name}`}
                                    </div>
                                </div>
                                <div className="fr-flex sm:fr-text-center fr-justify-between fr-items-center fr-gap-2">
                                    <div>
                                        <p className="fr-text-slate-800 fr-font-bold fr-m-0 fr-mt-1 fr-mb-1">
                                            ₹{customer_price || '-'}
                                        </p>
                                        {showRatePerTon && ton &&
                                        <div className="fr-text-sm fr-text-slate-600 fr-font-bold fr-mt-2">
                                            {`${util.roundedBy50(customer_price/ton)} ₹/ton`}
                                        </div>}
                                    </div>
                                    {showBookLink ?
                                        <BookTruckDialog queryData={queryData} utmSource={utmSource} translatedWords={translatedWords} />
                                    : null}
                                </div>
                            </div>
                        </div>
                    )
                })
            }
            {hasLoadMore && !util.isEmptyArray(cityPriceData) && loading ? loadingComp : null}
            {(hasLoadMore && !util.isEmptyArray(cityPriceData) && !loading) ? (
                <button
                    onClick={loadMore}
                    className="fr-w-full fr-my-2 fr-border-0 fr-bg-none fr-text-secondary fr-p-2 fr-cursor-pointer"
                    disabled={loading}
                >
                    {loadMoreLabel}
                </button>
            ) : null }
            {!hasLoadMore && !util.isEmptyArray(cityPriceData) ? <div className="fr-text-center fr-my-2 fr-p-2 fr-text-slate-500">{noMoreData}</div> : null}
        </>
    );
};

export default RateByTruckGroup;