'use client'

// React Imports
import { useState } from 'react'

// MUI Imports
import Grid from '@mui/material/Grid2'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'

type FormSensorHubProps = {
  onBack: () => void
}

const FormSensorHub = ({ onBack }: FormSensorHubProps) => {
  const [name, setName] = useState('')
  const [uuidSensor, setUuidSensor] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Call API to add sensor
  }

  return (
    <div className='flex flex-col gap-4'>
      <div className='flex items-center gap-2 mbe-2'>
        <Button
          variant='text'
          color='secondary'
          size='small'
          startIcon={<i className='tabler-arrow-right text-xl' />}
          onClick={onBack}
        >
          بازگشت
        </Button>
        {/* <Typography variant='h6'>افزودن سنسور جدید</Typography> */}
      </div>
      <form onSubmit={handleSubmit}>
        <Grid container spacing={4}>
          <Grid size={{ xs: 12 }}>
            <CustomTextField
              fullWidth
              label='نام سنسور'
              placeholder='نام سنسور را وارد کنید'
              value={name}
              onChange={e => setName(e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12 }}>
            <CustomTextField
              fullWidth
              label='شناسه سنسور (UUID)'
              placeholder='شناسه سنسور را وارد کنید'
              value={uuidSensor}
              onChange={e => setUuidSensor(e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12 }} className='flex gap-2'>
            <Button variant='tonal' color='secondary' onClick={onBack}>
              انصراف
            </Button>
            <Button variant='contained' type='submit' startIcon={<i className='tabler-plus' />}>
              ذخیره سنسور
            </Button>
          </Grid>
        </Grid>
      </form>
    </div>
  )
}

export default FormSensorHub
