import {Row, Col} from 'antd'
import {InboxOutlined} from '@ant-design/icons'
import {useState} from "react"
import {useParams} from 'react-router-dom'
import '../../styles/equipment_details.css'
import Documents from '../Documents'

const collectionOfLinesForStates = [
  {label: 'Состояние', unit: ''},
  {label: 'Полная наработка', unit: 'ч'},
  {label: 'Наработка после ТО1', unit: 'ч'},
  {label: 'Наработка после ТО1', unit: 'ч'},
  {label: 'Наработка вне р/р', unit: 'ч'},
  {label: 'Периодичность ТО1', unit: 'ч'},
  {label: 'Периодичность ТО2', unit: 'ч'},
]

const collectionOfLinesForIndicators = [
  {label: 'Скорость вращения', unit: 'Об/мин'},
  {label: 'Крутящий момент', unit: 'кН*м'},
  {label: 'Общий уровень вибрации', unit: 'мм/с'},
  {label: 'Уровень масла в баке', unit: 'м'},
  {label: 'Т верхнего подшипника', unit: '°C'},
  {label: 'Т нижнего подшипника', unit: '°C'},
  {label: 'Состояние ПЧ1', unit: ''},
  {label: 'Состояние ПЧ2', unit: ''},
]

export default function EquipmentDetails() {
  let stateOfEquipmentDetails = collectionOfLinesForStates.map(item => {
    return(
      <p key={item.label}>{item.label}: <span className="right-text"><b>{item.unit}</b></span></p>
    )
  })

  let indicatorsOfEquipmentDetail = collectionOfLinesForIndicators.map(item => {
    return(
      <p key={item.label}>{item.label}: <span className="right-text"><b>{item.unit}</b></span></p>
    )
  })

  return (<>
    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
      <Col span={12}>
        Тест 1
      </Col>
      <Col span={12}>
        {stateOfEquipmentDetails}
      </Col>
    </Row>
    <br/>
    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
      <Col span={12}>
        <Documents/>
      </Col>
      <Col span={12}>
        {indicatorsOfEquipmentDetail}
      </Col>
    </Row>
  </>)
}