
/* eslint-disable */
import React, { useEffect, useState } from 'react'
import { Box, Typography, Input, Button, unityTheme, Grid, Select, Checkbox } from '@ntpkunity/controls'
import { TenantWrap } from './tenantProfileStyle'
import { Controller, useForm } from 'react-hook-form'
import { ITenantProfileProps } from './ITenantProfile'
import { validation } from '../../../../shared/helper/methods'
import { updateTenantProfileService, useGetCountriesService, useGetIndustriesService } from '../../services'

export const TenantProfileComponent: React.FC<ITenantProfileProps> = (
  {
    setResponse,
    email
  }
) => {
  // const initialState = { name: '', industry_id: '', industry_name: '', country_id: '', contact_number: '', check_box: '' }
  const form: {
    handleSubmit: any
    control: any
    reset: any
    formState: any
    setValue: any
    watch: any
  } = useForm<{ name: '', industry_id: '', industry_name: '', country_id: '', contact_number: '', check_box: '' }>()
  const { control, handleSubmit, formState: { errors }, watch } = form

  const [countries, setCountries] = useState([])
  const [industries, setIndustries] = useState([])
  const otherIndustryType = 10
  const countriesData = async () => {
    const countries = await useGetCountriesService()
    const countryOptions = countries?.reduce((agg: any, country_id: any) => [
      ...agg,
      {
        text: country_id.name,
        value: country_id.id
      }
    ], [])
    setCountries(countryOptions)
  }

  const industriesData = async () => {
    const industries = await useGetIndustriesService()
    const industryList = industries?.reduce((agg: any, industry_id: any) => [
      ...agg,
      {
        text: industry_id.name,
        value: industry_id.id
      }
    ], [])
    setIndustries(industryList)
  }
  useEffect(() => {
    countriesData()
    industriesData()
  }, [])
  const industryType = watch('industry_id')
  const onSubmit = (data: any): void => {
    data.email = email
    updateTenantProfileService(data).then(res => {
      const { data, status } = res
      setResponse({ data, status })
    }).catch(error => {
      const { status, message } = error
      setResponse({ status, message })
    })
  }

  return (
    <TenantWrap theme={unityTheme} className="control-wrap">
      <Typography theme={unityTheme} variant="h2" component='h2' mb={4}>
        Finish Setting Up Your  <span className='text-primary'>Account</span>
      </Typography>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box theme={unityTheme} className="scrollable-content">
          <Grid container item spacing={3} theme={unityTheme}>
            <Grid theme={unityTheme} item xl={6} sm={6} xs={12}>
              <Controller
                name="name"
                control={control}
                rules={validation('Company Name', true)}
                render={({ field }) => (
                  <Input
                    theme={unityTheme}
                    fullWidth type={'text'}
                    label='Company Name'
                    {...field}
                    error={errors?.name?.message}
                  />
                )} />
            </Grid>
            <Grid theme={unityTheme} item xl={6} sm={6} xs={12}>
              <Controller
                name="industry_id"
                control={control}
                render={({ field }) => (
                  <Select
                    theme={unityTheme}
                    items={industries}
                    label='Industry (Optional)'
                    {...field}
                  />
                )} />
            </Grid>
            {(industryType === otherIndustryType) && (
              <Grid theme={unityTheme} item xl={12} sm={12} xs={12}>
                <Controller
                  name="industry_name"
                  control={control}
                  render={({ field }) => (
                    <Input
                      theme={unityTheme} fullWidth type={'text'} label='Industry Name'
                      {...field}
                    />
                  )}
                />
              </Grid>
            )}
            <Grid theme={unityTheme} item xl={6} sm={6} xs={12}>
              <Controller
                name="country_id"
                control={control}
                rules={validation('Country', true)}
                render={({ field }) => (
                  <Select
                    theme={unityTheme}
                    items={countries}
                    label='Country'
                    {...field}
                    selectError={errors?.country_id?.message}
                  />
                )} />
            </Grid>
            <Grid theme={unityTheme} item xl={6} sm={6} xs={12}>
              <Controller
                name="contact_number"
                control={control}
                render={({ field }) => (
                  <Input
                    theme={unityTheme}
                    fullWidth type={'text'}
                    label='Business Contact Number (Optional)'
                    {...field}
                  />
                )} />
            </Grid>
          </Grid>
        </Box>
        <Box theme={unityTheme} mt={3}>
          <Controller
            name="is_subscribed"
            control={control}
            render={({ field }) => (
              <Checkbox
                theme={unityTheme}
                label='I agree to receive marketing material related to the product(s)'
                {...field}
              />
            )} />
        </Box>

        <Box theme={unityTheme} mt={4}>
          <Button type={'submit'} primary text='Continue' fullWidth theme={unityTheme} />
        </Box>
      </form>
      {/* <Box theme={unityTheme} className='progress-steps'>
        <Box theme={unityTheme} className='previous-step progress-step'>
          <LinearProgressBar theme={unityTheme} value={100} />
        </Box>
        <Box theme={unityTheme} className='active-step progress-step'>
          <LinearProgressBar theme={unityTheme} value={100} />
        </Box>
        <Box theme={unityTheme} className='progress-step'>
          <LinearProgressBar theme={unityTheme} value={0} />
        </Box>
      </Box>
      <Typography
        theme={unityTheme}
        variant='caption'
        component='small'
        display={'block'}
        textAlign={'center'}
        mt={2}
        >
        50% Completed
      </Typography> */}
    </TenantWrap>
  )
}

export default TenantProfileComponent
