'use client'

// React Imports
import { useState } from 'react'
import { useTranslations } from 'next-intl'

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

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

const Address = () => {
  const t = useTranslations('accountSettings')
  const tBilling = useTranslations('accountSettings.billing')

  // States
  const [state, setState] = useState('')

  return (
    <Card>
      <CardHeader title={tBilling('billingAddress')} />
      <CardContent>
        <form>
          <Grid container spacing={6}>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth label={tBilling('companyName')} variant='outlined' placeholder='Pixinvent' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth label={tBilling('billingEmail')} variant='outlined' placeholder='john.doe@example.com' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth label={tBilling('taxId')} variant='outlined' placeholder='Enter TAX ID' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth label={tBilling('vatNumber')} variant='outlined' placeholder='Enter VAT Number' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField
                fullWidth
                type='number'
                label={tBilling('mobileNumber')}
                placeholder='202 555 0111'
                slotProps={{
                  input: {
                    startAdornment: <InputAdornment position='start'>US (+1)</InputAdornment>
                  }
                }}
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField select fullWidth label={tBilling('country')} value={state} onChange={e => setState(e.target.value)}>
                <MenuItem value=''>{tBilling('selectCountry')}</MenuItem>
                <MenuItem value='australia'>{tBilling('australia')}</MenuItem>
                <MenuItem value='canada'>{tBilling('canada')}</MenuItem>
                <MenuItem value='france'>{tBilling('france')}</MenuItem>
                <MenuItem value='united-kingdom'>{tBilling('unitedKingdom')}</MenuItem>
                <MenuItem value='united-states'>{tBilling('unitedStates')}</MenuItem>
              </CustomTextField>
            </Grid>
            <Grid size={{ xs: 12 }}>
              <CustomTextField fullWidth label={tBilling('billingAddress')} variant='outlined' placeholder={tBilling('billingAddress')} />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth label={tBilling('state')} variant='outlined' placeholder='California' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField fullWidth type='number' label={tBilling('zipCode')} variant='outlined' placeholder='231465' />
            </Grid>
            <Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
              <Button variant='contained'>{t('saveChanges')}</Button>
              <Button variant='tonal' type='reset' color='secondary' onClick={() => setState('')}>
                {tBilling('discard')}
              </Button>
            </Grid>
          </Grid>
        </form>
      </CardContent>
    </Card>
  )
}

export default Address