import {Table, Select, DatePicker, ConfigProvider} from 'antd';
import {MessageService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import Loader from '../components/Loader'
import '../styles/message.css'
import notify from '../components/notify'
import locale from "antd/lib/locale/ru_RU";
import moment from 'moment'

const {Option} = Select
const pageSize = 26
const {RangePicker} = DatePicker;

// Словарь категорий для строк таблицы
const categoryDictionary = {
  1: {title: 'Авария'},
  2: {title: 'Предупреждение'},
  3: {title: 'Информация'},
}

const columns = [
  {
    title: 'Дата',
    key: 'date',
    dataIndex: 'date',
    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
  },
  {
    title: 'Категория',
    key: 'categoryId',
    dataIndex: 'categoryId',
    render: (_, item) => categoryDictionary[item.categoryId].title,
    style: (_, item) => categoryDictionary[item.categoryId].style,
    ellipsis: true,
  },
  {
    title: 'Сообщение',
    key: 'message',
    dataIndex: 'message',
  },
  {
    title: 'Пользователь',
    key: 'user',
    dataIndex: 'user',
  },
];

const filterOptions = [
  {label: 'Авария', value: 1},
  {label: 'Предупреждение', value: 2},
  {label: 'Информация', value: 3},
]

// Данные для таблицы
export default function Messages() {
  let {id} = useParams()
  const [messages, setMessages] = useState([])
  const [pagination, setPagination] = useState(null)
  const [page, setPage] = useState(1)
  const [range, setRange] = useState([])
  const [categories, setCategories] = useState([])

  const [loader, setLoader] = useState(false)


  const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)

  const onChangeRange = (range) => {
    setRange(range)
  }

  const GetMessages = async () => {
    setLoader(true)
    try {
      let begin = null
      let end = null
      if (range?.length > 1) {
        begin = range[0].toISOString()
        end = range[1].toISOString()
      }
      let paginatedMessages = await MessageService.getMessage(`${id}`,
        (page - 1) * pageSize,
        pageSize,
        categories,
        begin,
        end)
      setMessages(paginatedMessages.items.map(m => {
        return {
          key: m.id,
          categoryids: categoryDictionary[m.categoryId],
          begin: m.date,
          ...m
        }
      }))
      setPagination({
        total: paginatedMessages.count,
        current: Math.floor(paginatedMessages.skip / pageSize),
      })
    } catch (ex) {
      notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
      console.log(ex)
    }
    setLoader(false)
  }

  useEffect(() => {
    GetMessages()
  }, [page, categories, range])

  return (
    <>

      <div className='filter-group'>
        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
        <Select
          mode="multiple"
          allowClear
          placeholder="Фильтр сообщений"
          className="filter-selector"
          value={categories}
          onChange={setCategories}>
          {children}
        </Select>
        <ConfigProvider locale={locale}>
          <RangePicker
            showTime
            onChange={onChangeRange}
          />
        </ConfigProvider>
      </div>
      <Table
        columns={columns}
        dataSource={messages}
        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
        size={'small'}
        pagination={{
          pageSize: pageSize,
          showSizeChanger: false,
          total: pagination?.total,
          current: page,
          onChange: (page) => setPage(page)
        }}
        rowKey={(record) => record.id}
      />
      {loader && <Loader/>}
    </>
  )
}