asb_cloud_front/src/components/WellTreeSelector.tsx

import { TreeSelect } from 'antd'
import { DefaultValueType } from 'rc-tree-select/lib/interface'
import { useState, useEffect, ReactNode } from 'react'
import { useHistory, useRouteMatch } from 'react-router-dom'
import LoaderPortal from './LoaderPortal'
import { DepositService } from '../services/api'
import { invokeWebApiWrapperAsync } from './factory'
import { WellIcon, WellIconState } from './icons'
import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
import { DepositDto } from '../services/api'
import { RawDate } from '../utils/DateTimeUtils'
import '../styles/wellTreeSelect.css'

export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown'
export const checkIsWellOnline = (lastTelemetryDate?: RawDate): boolean => {
    if (!lastTelemetryDate || isNaN(+new Date(lastTelemetryDate))) return false
    return Date.now() - +new Date(lastTelemetryDate) < 600_000
}

export type TreeNodeData = {
    title?: string | null
    key?: string
    value?: DefaultValueType
    icon?: ReactNode
    children?: TreeNodeData[]
}

export const WellTreeSelector = () => {
    const [wellsTree, setWellsTree] = useState<any>([]) // TODO: Исправить тип (необходимо разобраться с типом значения  rc-select)
    const [showLoader, setShowLoader] = useState<boolean>(false)
    const history = useHistory()
    const routeMatch = useRouteMatch('/:route/:id')

    useEffect(() => {
        invokeWebApiWrapperAsync(
            async () => {
                const deposits: Array<DepositDto> = await DepositService.getDeposits()
                const wellsTree: TreeNodeData[] = deposits.map(deposit =>({
                    title: deposit.caption,
                    key: `/deposit/${deposit.id}`,
                    value: {
                        value: `/deposit/${deposit.id}`,
                        label: deposit.caption,
                    },
                    icon: <DepositIcon width={24} height={24}/>,
                    children: deposit.clusters?.map(cluster => ({
                        title: cluster.caption,
                        key: `/cluster/${cluster.id}`,
                        value: {
                            value: `/cluster/${cluster.id}`,
                            label: `${deposit.caption} / ${cluster.caption}`,
                        },
                        icon: <ClusterIcon width={24} height={24}/>,
                        children: cluster.wells?.map(well => ({
                            title: well.caption,
                            key: `/well/${well.id}`,
                            value: {
                                value: `/well/${well.id}`,
                                label: `${deposit.caption} / ${cluster.caption} / ${well.caption}`
                            },
                            icon: <WellIcon
                                width={24}
                                height={24}
                                state={getWellState(well.idState)}
                                online={checkIsWellOnline(well.lastTelemetryDate)}
                            />
                        })),
                    })),
                }))
                setWellsTree(wellsTree)
            },
            setShowLoader,
            `Не удалось загрузить список скважин`
        )
    }, [])

    const onSelect = (value: string): void => {
        if (value) history.push(value)
    }

    return (
        <LoaderPortal show={showLoader}>
            <TreeSelect
                labelInValue
                treeIcon
                className={'header-tree-select'}
                bordered={false}
                dropdownMatchSelectWidth={false}
                placeholder={'Выберите месторождение'}
                treeData={wellsTree}
                treeDefaultExpandAll
                onSelect={onSelect}
                value = {routeMatch?.url}
            />
        </LoaderPortal>
    )
}

export default WellTreeSelector