farmcontrol-ui/src/components/Dashboard/common/PrinterMovementPanel.jsx

// PrinterMovementPanel.js
import React, { useContext, useState } from 'react'
import {
  Flex,
  Space,
  InputNumber,
  Button,
  Radio,
  Dropdown,
  Card,
  message // eslint-disable-line
} from 'antd'
import { SocketContext } from '../context/SocketContext'
import PropTypes from 'prop-types'
import LevelBedIcon from '../../Icons/LevelBedIcon'
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
import ArrowRightIcon from '../../Icons/ArrowRightIcon'
import ArrowUpIcon from '../../Icons/ArrowUpIcon'
import ArrowDownIcon from '../../Icons/ArrowDownIcon'
import HomeIcon from '../../Icons/HomeIcon'

const PrinterMovementPanel = ({ printerId }) => {
  const [posValue, setPosValue] = useState(10)
  const [rateValue, setRateValue] = useState(1000)
  const { socket } = useContext(SocketContext)

  //const messageApi = message.useMessage()

  const handlePosRadioChange = (e) => {
    const value = e.target.value
    setPosValue(value) // Update posValue state when radio button changes
  }

  const handlePosInputChange = (value) => {
    setPosValue(value) // Update posValue state when input changes
  }

  const handleRateInputChange = (value) => {
    setRateValue(value) // Update rateValue state when input changes
  }

  const handleHomeAxisClick = (axis) => {
    if (socket) {
      console.log('Homeing Axis:', axis)
      socket.emit('printer.gcode.script', {
        printerId,
        script: `G28 ${axis}`
      })
    }
  }

  const handleMoveAxisClick = (axis, minus) => {
    const distanceValue = !minus ? posValue * -1 : posValue
    if (socket) {
      console.log('Moving Axis:', axis, distanceValue)
      socket.emit('printer.gcode.script', {
        printerId,
        script: `_CLIENT_LINEAR_MOVE ${axis}=${distanceValue} F=${rateValue}`
      })
    }
    //sendCommand('moveAxis', { axis, pos, rate })
  }

  const handleLevelBedClick = () => {
    //sendCommand('levelBed')
  }

  const homeAxisButtonItems = [
    {
      key: 'homeXYZ',
      label: 'Home XYZ',
      onClick: () => handleHomeAxisClick('ALL')
    },
    {
      key: 'homeXY',
      label: 'Home XY',
      onClick: () => handleHomeAxisClick('X Y')
    },
    {
      key: 'homeX',
      label: 'Home X',
      onClick: () => handleHomeAxisClick('X')
    },
    {
      key: 'homeY',
      label: 'Home Y',
      onClick: () => handleHomeAxisClick('Y')
    },
    {
      key: 'homeZ',
      label: 'Home Z',
      onClick: () => handleHomeAxisClick('Z')
    }
  ]

  return (
    <div style={{ minWidth: 190 }}>
      <Flex vertical gap={'large'}>
        <Flex horizontal='true' gap='small'>
          <Card size='small' title='XY'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('Y', false)
                }}
              />
              <Space>
                <Button
                  icon={<ArrowLeftIcon />}
                  onClick={() => {
                    handleMoveAxisClick('X', false)
                  }}
                />
                <Dropdown
                  menu={{ items: homeAxisButtonItems }}
                  placement='bottom'
                >
                  <Button icon={<HomeIcon />}></Button>
                </Dropdown>
                <Button
                  icon={<ArrowRightIcon />}
                  onClick={() => {
                    handleMoveAxisClick('X', true)
                  }}
                />
              </Space>
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('Y', true)
                }}
              ></Button>
            </Flex>
          </Card>
          <Card size='small' title='Z'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('Z', true)
                }}
              />
              <Button
                icon={<LevelBedIcon />}
                onClick={() => {
                  handleLevelBedClick()
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('Z', false)
                }}
              ></Button>
            </Flex>
          </Card>
          <Card size='small' title='E'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('E', true)
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('E', false)
                }}
              ></Button>
            </Flex>
          </Card>
        </Flex>

        <Flex vertical gap='small'>
          <Radio.Group
            onChange={handlePosRadioChange}
            value={posValue}
            name='posRadio'
            style={{
              display: 'flex',
              justifyContent: 'center'
            }}
            block
          >
            <Radio.Button value={0.1}>0.1</Radio.Button>
            <Radio.Button value={1}>1</Radio.Button>
            <Radio.Button value={10}>10</Radio.Button>
            <Radio.Button value={100}>100</Radio.Button>
          </Radio.Group>

          <Flex horizontal='true' gap='small'>
            <InputNumber
              min={0.1}
              max={100}
              value={posValue}
              formatter={(value) => `${value} mm`}
              parser={(value) => value?.replace(' mm', '')}
              onChange={handlePosInputChange}
              placeholder='10 mm'
              name='posInput'
              style={{ flexGrow: 1 }}
            />
            <InputNumber
              min={1}
              max={5000}
              value={rateValue}
              formatter={(value) => `${value} mm/s`}
              parser={(value) => value?.replace(' mm/s', '')}
              onChange={handleRateInputChange}
              placeholder='100 mm/s'
              name='rateInput'
              style={{ flexGrow: 1 }}
            />
          </Flex>
        </Flex>
      </Flex>
    </div>
  )
}

PrinterMovementPanel.propTypes = {
  printerId: PropTypes.string.isRequired
}

export default PrinterMovementPanel