'use client'

// React Imports

// MUI Imports
import Button from '@mui/material/Button'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardHeader from '@mui/material/CardHeader'
import Grid from '@mui/material/Grid2'

// Components Imports
import CustomIconButton from '@core/components/mui/IconButton'
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 ProductVariants = () => {
  const dispatch = useDispatch()
  const { variants } = useSelector((state: RootState) => state.productReducer.productRequest)

  const handleAddVariant = () => {
    if (!variants) {
      dispatch(setProductField({ field: 'variants', value: [{ name: '', cost: 0, price_modifier: 0 }] }))
    } else {
      dispatch(setProductField({ field: 'variants', value: [...variants, { name: '', cost: 0, price_modifier: 0 }] }))
    }
  }

  const handleRemoveVariant = (index: number) => {
    const updated = variants.filter((_, i) => i !== index)
    dispatch(setProductField({ field: 'variants', value: updated }))
  }

  const handleInputChange = (index: number, e: any) => {
    const { name, value } = e.target
    const updated = [...variants]
    updated[index] = {
      ...updated[index],
      [name]: name === 'name' ? value : Number(value)
    }
    dispatch(setProductField({ field: 'variants', value: updated }))
  }

  return (
    <Card>
      <CardHeader title='Product Variants' />
      <CardContent>
        <Grid container spacing={6}>
          {variants &&
            variants.map((variant, index) => (
              <Grid key={index} size={{ xs: 12 }} className='repeater-item'>
                <Grid container spacing={6}>
                  <Grid size={{ xs: 12, sm: 4 }}>
                    <CustomTextField
                      fullWidth
                      label='Variant Name'
                      placeholder='Hot'
                      name='name'
                      value={variant.name}
                      onChange={e => handleInputChange(index, e)}
                    />
                  </Grid>
                  <Grid size={{ xs: 12, sm: 4 }}>
                    <CustomTextField
                      fullWidth
                      label='Price Modifier'
                      placeholder='0'
                      name='price_modifier'
                      value={variant.price_modifier}
                      onChange={e => handleInputChange(index, e)}
                    />
                  </Grid>
                  <Grid size={{ xs: 12, sm: 4 }}>
                    <div className='flex items-center gap-3'>
                      <CustomTextField
                        fullWidth
                        label='Cost'
                        placeholder='0'
                        name='cost'
                        value={variant.cost}
                        onChange={e => handleInputChange(index, e)}
                      />
                      <CustomIconButton onClick={() => handleRemoveVariant(index)} className='min-is-fit'>
                        <i className='tabler-x' />
                      </CustomIconButton>
                    </div>
                  </Grid>
                </Grid>
              </Grid>
            ))}
          <Grid size={{ xs: 12 }}>
            <Button variant='contained' onClick={handleAddVariant} startIcon={<i className='tabler-plus' />}>
              Add Another Option
            </Button>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  )
}

export default ProductVariants
