import { Link } from 'react-router-dom'
import { useState, useEffect, memo } from 'react'
import { LineChartOutlined, ProfileOutlined } from '@ant-design/icons'
import { Table, Tag, Button, Badge, Divider, Modal, Row, Col, Popconfirm } from 'antd'

import { CompanyView } from '@components/views'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
import { DrillParamsService, WellCompositeService } from '@api'

import {
  calcAndUpdateStatsBySections,
  makeFilterMinMaxFunction,
  getOperations
} from '@pages/Cluster/functions'
import WellOperationsTable from '@pages/Cluster/WellOperationsTable'
import { Tvd } from '../Tvd'
import { getColumns } from '../WellDrillParams'


const filtersMinMax = [
  { text: 'min', value: 'min' },
  { text: 'max', value: 'max' },
]

const filtersSectionsType = []
const DAY_IN_MS = 1000 * 60 * 60 * 24

export const WellCompositeSections = memo(({ idWell, statsWells, selectedSections }) => {
  const [rows, setRows] = useState([])
  const [params, setParams] = useState([])
  const [paramsColumns, setParamsColumns] = useState([])
  const [selectedWells, setSelectedWells] = useState([])
  const [wellOperations, setWellOperations] = useState([])
  const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
  const [selectedWellId, setSelectedWellId] = useState(0)
  const [showLoader, setShowLoader] = useState(false)
  const [showParamsLoader, setShowParamsLoader] = useState(false)
  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
  const [isParamsModalVisible, setIsParamsModalVisible] = useState(false)

  useEffect(() => (async() => setParamsColumns(await getColumns(idWell)))(), [idWell])

  useEffect(() => {
    if (isOpsModalVisible || selectedWellId <= 0) return
    invokeWebApiWrapperAsync(
      async () => {
        const { operations } = await getOperations(selectedWellId)
        setWellOperations(operations)
      },
      setShowLoader,
      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
    )
  }, [selectedWellId, isOpsModalVisible])

  useEffect(() => {
    const rows = []
    statsWells?.forEach((well) => {
      well.sections?.forEach((section) => {
        if (!filtersSectionsType.some((el) => el.text === section.caption))
          filtersSectionsType.push({ text: section.caption, value: section.caption })

        const row = {
          key: well.caption + section.id,
          id: well.id,
          sectionId: section.id,
          caption: well.caption,
          sectionType: section.caption,
          sectionWellDepthPlan: section.plan?.wellDepthEnd,
          sectionWellDepthFact: section.fact?.wellDepthEnd,
          sectionBuildDaysPlan: (new Date(section.plan?.end) - new Date(section.plan?.start)) / DAY_IN_MS,
          sectionBuildDaysFact: (new Date(section.fact?.end) - new Date(section.fact?.start)) / DAY_IN_MS,
          sectionRateOfPenetrationPlan: section.plan?.rop,
          sectionRateOfPenetrationFact: section.fact?.rop,
          sectionRouteSpeedPlan: section.plan?.routeSpeed,
          sectionRouteSpeedFact: section.fact?.routeSpeed,
          sectionBhaDownSpeedPlan: section.plan?.bhaDownSpeed,
          sectionBhaDownSpeedFact: section.fact?.bhaDownSpeed,
          sectionBhaUpSpeedPlan: section.plan?.bhaUpSpeed,
          sectionBhaUpSpeedFact: section.fact?.bhaUpSpeed,
          sectionCasingDownSpeedPlan: section.plan?.casingDownSpeed,
          sectionCasingDownSpeedFact: section.fact?.casingDownSpeed,
          nonProductiveTimePlan: section.plan?.nonProductiveHours,
          nonProductiveTimeFact: section.fact?.nonProductiveHours,
          companies: well.companies,
        }

        rows.push(row)
      })
    })

    calcAndUpdateStatsBySections(rows ?? [], [
      'sectionWellDepthPlan',
      'sectionWellDepthFact',
      'sectionBuildDaysPlan',
      'sectionBuildDaysFact',
      'sectionRateOfPenetrationPlan',
      'sectionRateOfPenetrationFact',
      'sectionRouteSpeedPlan',
      'sectionRouteSpeedFact',
      'sectionBhaDownSpeedPlan',
      'sectionBhaDownSpeedFact',
      'sectionBhaUpSpeedPlan',
      'sectionBhaUpSpeedFact',
      'sectionCasingDownSpeedPlan',
      'sectionCasingDownSpeedFact',
      'nonProductiveTimePlan',
      'nonProductiveTimeFact',
    ])

    setRows(rows)
  }, [statsWells])

  useEffect(() => {
    const selected = rows.filter((row) => selectedSections.some(section => (
      section.idWellSrc === row.id && section.idWellSectionType === row.sectionId
    )))

    setSelectedWells(selected)
    setSelectedWellsKeys(selected.map((row) => row.key))
  }, [rows, selectedSections])

  const columns = [
    makeTextColumn('скв №', 'caption', null, null,
      (text, item) => <Link to={`/well/${item?.id}`}>{text ?? '-'}</Link>
    ),
    makeTextColumn('Секция', 'sectionType', filtersSectionsType, null, (text) => text ?? '-'),
    makeNumericColumnPlanFact('Глубина, м', 'sectionWellDepth', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Продолжительность, ч', 'sectionBuildDays', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('МСП, м/ч', 'sectionRateOfPenetration', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Рейсовая скорость, м/ч', 'sectionRouteSpeed', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Спуск КНБК, м/ч', 'sectionBhaDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Подъем КНБК, м/ч', 'sectionBhaUpSpeed', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('Скорость спуска ОК, м/ч', 'sectionCasingDownSpeed', filtersMinMax, makeFilterMinMaxFunction),
    makeNumericColumnPlanFact('НПВ, сут', 'nonProductiveTime', filtersMinMax, makeFilterMinMaxFunction, null, '70px'),
    {
      title: 'TVD',
      render: (value) => (
        <Button onClick={() => {
          setSelectedWellId(value.id)
          setIsTVDModalVisible(true)
        }}>
          <LineChartOutlined />
        </Button>
      ),
      align: 'center'
    },
    {
      title: 'Операции',
      render: (value) => (
        <Button onClick={()=> {
          setSelectedWellId(value.id)
          setIsOpsModalVisible(true)
        }}>
          <ProfileOutlined />
        </Button>
      ),
      align: 'center'
    },
    {
      title: 'Участники',
      dataIndex: 'companies',
      render: (item) => item?.map((company) => (
        <Tag key={company.caption} color={'blue'}>
          <CompanyView company={company} />
        </Tag>
      )) ?? '-',
    },
  ]

  const rowSelection = {
    selectedRowKeys: selectedWellsKeys,
    onChange: (keys, items) => invokeWebApiWrapperAsync(
      async () => {
        const selectedSections = items.map((row) => ({idWell, idWellSrc: row.id, idWellSectionType: row.sectionId}))
        await WellCompositeService.save(idWell, selectedSections)

        setSelectedWells(items)
        setSelectedWellsKeys(keys)
      },
      setShowParamsLoader,
      `Не удалось сохранить изменения выбранных секций для композитной скважины "${idWell}"`,
      'Изменение выбранных секций скважины'
    )
  }

  const onParamButtonClick = () => invokeWebApiWrapperAsync(
    async () => {
      setIsParamsModalVisible(true)
      const params = await DrillParamsService.getCompositeAll(idWell)
      setParams(params)
    },
    setShowParamsLoader,
    `Не удалось загрузить список режимов для скважины "${idWell}"`,
    'Получение списка режимов скважины'
  )

  const onParamsAddClick = () => invokeWebApiWrapperAsync(
    async () => {
      await DrillParamsService.save(idWell, params)
      setIsParamsModalVisible(false)
    },
    setShowLoader,
    `Не удалось добавить режимы в список скважины "${idWell}"`,
    'Добавление режима скважины'
  )

  return (
    <>
      <Table
        columns={columns}
        dataSource={rows}
        size={'small'}
        bordered
        scroll={{ x: true, y: 620 }}
        rowSelection={rowSelection}
        pagination={false}
      />
      <Divider />
      <Badge.Ribbon text={'комбинированная скважина'} color={'gray'}>
        <h3>Выбранные секции</h3>
      </Badge.Ribbon>
      <Table
        columns={columns}
        dataSource={selectedWells}
        rowSelection={rowSelection}
        size={'small'}
        bordered
        scroll={{ x: true }}
        pagination={false}
      />
      <Row justify={'end'} style={{ margin: '1rem 0' }}>
        <Col>
          <Button
            size={'large'}
            disabled={selectedWells.length <= 0}
            onClick={onParamButtonClick}
          >
            Заполнить режимы текущей скважины
          </Button>
        </Col>
      </Row>

      <Modal
        title={'TVD'}
        centered
        visible={isTVDModalVisible}
        onCancel={() => setIsTVDModalVisible(false)}
        width={1500}
        footer={null}
      >
        <Tvd idWell={selectedWellId}/>
      </Modal>

      <Modal
        title={'Операции'}
        centered
        visible={isOpsModalVisible}
        onCancel={() => setIsOpsModalVisible(false)}
        width={1500}
        footer={null}
      >
        <LoaderPortal show={showLoader}>
          <WellOperationsTable wellOperations={wellOperations} />
        </LoaderPortal>
      </Modal>

      <Modal
        title={'Заполнить режимы текущей скважины'}
        centered
        visible={isParamsModalVisible}
        onCancel={() => setIsParamsModalVisible(false)}
        width={1700}
        footer={(
          <Popconfirm title={'Заменить существующие режимы выбранными?'} onConfirm={onParamsAddClick}>
            <Button size={'large'} disabled={params.length <= 0}>Сохранить</Button>
          </Popconfirm>
        )}
      >
        <LoaderPortal show={showParamsLoader}>
          <Table
            size={'small'}
            bordered
            columns={paramsColumns}
            dataSource={params}
            pagination={false}
          />
        </LoaderPortal>
      </Modal>
    </>
  )
})

export default WellCompositeSections