import { Button, Layout } from 'antd'
import { FileWordOutlined } from '@ant-design/icons'
import { memo, useCallback, useEffect, useState } from 'react'

import { Flex } from '@components/Grid'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { arrayOrDefault, formatDate } from '@utils'
import { DrillingProgramService } from '@api'

import CategoryAdder from './CategoryAdder'
import CategoryRender from './CategoryRender'
import CategoryEditor from './CategoryEditor'
import CategoryHistory from './CategoryHistory'

import '@styles/drilling_program.less'

export const DrillingProgram = memo(({ idWell }) => {
  const [selectedCategory, setSelectedCategory] = useState()
  const [historyVisible, setHistoryVisible] = useState(false)
  const [editorVisible, setEditorVisible] = useState(false)
  const [showLoader, setShowLoader] = useState(false)
  const [categories, setCategories] = useState([])
  const [data, setData] = useState({})

  const updateData = useCallback(async () => await invokeWebApiWrapperAsync(
    async () => {
      const data = await DrillingProgramService.getState(idWell)
      const categories = arrayOrDefault(await DrillingProgramService.getCategories(idWell))
      setData(data)
      setCategories(categories.filter(cat => {
        if (cat?.id && (cat.name || cat.shortName))
          if (data?.parts.findIndex((val) => val.idFileCategory === cat.id) < 0)
            return true
        return false
      }))
    },
    setShowLoader,
    `Не удалось загрузить название скважины "${idWell}"`
  ), [idWell])

  useEffect(() => updateData(), [updateData])

  const onCategoryEdit = (catId) => {
    setSelectedCategory(catId)
    setEditorVisible(!!catId)
  }

  const onCategoryHistory = (catId) => {
    setSelectedCategory(catId)
    setHistoryVisible(!!catId)
  }

  const onEditorClosed = useCallback(() => {
    setEditorVisible(false)
    updateData()
  }, [updateData])

  return (
    <LoaderPortal show={showLoader}>
      <Layout>
        {data && (
          <div style={{ border: '1px solid #BEBEBE' }}>
            <div style={{ padding: '5px 10px', backgroundColor: '#F3F3F3', borderBottom: '1px solid #BEBEBE' }}>Программа бурения</div>
            <Flex style={{ justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'white' }}>
              <Button type={'link'} icon={<FileWordOutlined />} style={{ marginLeft: '10px' }}>{data.name}</Button>
              <div style={{ margin: '10px' }}>Размер: {data.size}</div>
              <div style={{ margin: '10px' }}>Загружен: {formatDate(data.uploadDate)}</div>
            </Flex>
          </div>
        )}

        {data?.parts?.map?.((part, idx) => part && (
          <CategoryRender
            key={`${idx}`}
            idWell={idWell}
            partData={part}
            onEdit={onCategoryEdit}
            onUpdate={updateData}
            onHistory={onCategoryHistory}
          />
        ))}

        <CategoryAdder
          idWell={idWell}
          categories={categories}
          onUpdate={updateData}
        />

        <CategoryEditor
          idWell={idWell}
          visible={editorVisible}
          onClosed={onEditorClosed}
          category={data?.parts?.find((part) => part.idFileCategory === selectedCategory) ?? {}}
        />

        <CategoryHistory
          idWell={idWell}
          idCategory={selectedCategory}
          onClose={() => setHistoryVisible(false)}
          visible={historyVisible}
        />
      </Layout>
    </LoaderPortal>
  )
})

export default DrillingProgram