import React from 'react'
import { Modal } from '../../lib/common/CustomDrawerWithModal'
import { CloseIconSvg } from '../../assets/svg/closeIconSvg'
import { TruckTypes } from '../truckTypes'
import { RegionWiseBranches } from '../RegionWiseBranches'
import { FilterProps } from './type'

export const AllLoadsFilter = (props: FilterProps) => {
    const {icon, truckTypes, regions, multiSelect, lang, truckTypeCallback, branchCallback, onReset, onShowResult, defaultTruckTypeIds, defaultBranchIds, translatedWords } = props
    const {translatedFilter, translatedTruckTypes, translatedCities,  translatedReset, translatedShowResult} = translatedWords
    const truckTypeChange = (truckTypeIds: Array<number>) => {
        truckTypeCallback(truckTypeIds)
    }

    const branchChange = (branchIds: Array<number>) => {
        branchCallback(branchIds)
    }
    return (
        <Modal
            icon={icon}
            title={translatedFilter}
            closeIcon={<CloseIconSvg />}
            content={<div>
                <p className="DialogDescription fr-pl-4">
                    {translatedTruckTypes}
                </p>
                <div className='fr-border-b-groove'>
                    <div className='fr-px-4'>
                    <TruckTypes
                        truckTypes={truckTypes}
                        callback={truckTypeChange}
                        multiSelect={multiSelect}
                        lang={lang}
                        defaultTypes={defaultTruckTypeIds}
                    /></div>
                </div>
                <p className='DialogDescription fr-pl-4'>
                    {translatedCities}
                </p>
                <div className='fr-px-4'>
                <RegionWiseBranches
                    regions={regions}
                    callback={branchChange}
                    multiSelect={multiSelect}
                    lang={lang}
                    defaultCities={defaultBranchIds}
                /></div>
            </div>}
            footerContent={
                <div className="Button fr-reset-btn" onClick={onReset}>{translatedReset}</div>
            }
            onCloseContent={
                <div className="Button fr-show-btn" onClick={onShowResult}>{translatedShowResult}</div>
            }
            
        />
    )
}