'use client'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Checkbox from '@mui/material/Checkbox'
import Divider from '@mui/material/Divider'
import FormControlLabel from '@mui/material/FormControlLabel'
import Switch from '@mui/material/Switch'
import Typography from '@mui/material/Typography'

// Component Imports
import Form from '@components/Form'
import CustomTextField from '@core/components/mui/TextField'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../../../../redux-store'
import { setProductField } from '../../../../../redux-store/slices/product'

const ProductPricing = () => {
  const { price, cost } = useSelector((state: RootState) => state.productReducer.productRequest)
  const dispatch = useDispatch()

  const handleInputChange = (field: any, value: any) => {
    dispatch(setProductField({ field, value }))
  }

  return (
    <Card>
      <CardHeader title='Pricing' />
      <CardContent>
        <Form>
          <CustomTextField
            fullWidth
            label='Base Price'
            placeholder='Enter Base Price'
            className='mbe-6'
            value={price}
            onChange={e => handleInputChange('price', e.target.value)}
          />
          <CustomTextField
            fullWidth
            label='Cost'
            placeholder='$499'
            className='mbe-6'
            value={cost}
            onChange={e => handleInputChange('cost', e.target.value)}
          />
          <FormControlLabel control={<Checkbox defaultChecked />} label='Charge tax on this product' />
          <Divider className='mlb-2' />
          <div className='flex items-center justify-between'>
            <Typography>In stock</Typography>
            <Switch defaultChecked />
          </div>
        </Form>
      </CardContent>
    </Card>
  )
}

export default ProductPricing
