/* eslint-disable */
import * as React from 'react'
import { Box, Typography, Button, unityTheme } from '@ntpkunity/controls'
import ScrollIcon from '../../../../shared/assets/images/scroll-icon.gif'
import { ControlWrap, ScrollIconWrap } from './termsCondAgreementStyle'
import { ITermsCondAggrement } from './ITermsCondAggrement'
import { useForm } from 'react-hook-form'
import { useGetTermsService, useTermsService } from '../../services'
import { useEffect, useState } from 'react'

export const TermsCondAgreementComponent: React.FC<ITermsCondAggrement> = (
  {
    email,
    setResponse
  }
) => {
  const [dataTerms, setDataTerms] = useState(String)
  const [isDisable, setIsDisable] = useState<boolean>(true)
  const [data, setData] = useState('I Agree and Continue')
  const handleScroll = (e: any) => {
    const bottom =
      e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight
    const data = 'Scroll Down to Agree and Continue'
    setData(data)
    if (bottom) {
      setIsDisable(false)
      setData('I Agree and Continue')
    }
  }
  const form: {
    handleSubmit: any
    reset: any
    setValue: any
  } = useForm<{}>()
  const { handleSubmit } = form

  // useEffect(() => {
  //   // const dataTerms = useGetTermsService()
  //   setDataTerms(useGetTermsService())
  // }, [])
  const [content, setContent] = React.useState<string>('')

  const [termId, setTermId] = React.useState()

  React.useEffect(() => {
    useGetTermsService().then(res => { 
      setContent(res?.content) 
      setTermId(res?.id)
    }
      ).catch(err => console.log(err));

    return () => { }
  }, []);

  const onSubmit = (data: any): void => {
    data.email = email
    data.terms_id = termId
    useTermsService(data).then(res => {
      const { data, status } = res
      setResponse({ data, status })
    }).catch(error => {
      const { status, message } = error
      setResponse({ status, message })
    })
  }
  return (
    <ControlWrap theme={unityTheme} className='control-wrap'>
      <Typography theme={unityTheme} variant='h2' component='h2' mb={4}>
        Terms and Conditions of Use and End User License Agreement
      </Typography>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box theme={unityTheme} className='scrollable-content' mb={4}>
          <Box theme={unityTheme} className='viewport' onScroll={handleScroll}>       
            <div dangerouslySetInnerHTML={{ __html: content }}></div>
            <ScrollIconWrap theme={unityTheme} className='scroll-icon'>
              <img src={ScrollIcon} alt='Scroll' />
              <Typography
                theme={unityTheme}
                variant='body2'
                component='span'
                display={'block'}
              >
                Scroll
              </Typography>
            </ScrollIconWrap>
          </Box>
        </Box>

        <Button type={'submit'} primary fullWidth theme={unityTheme} disabled={isDisable} text={data}
        />
      </form>
    </ControlWrap>

  )
}
export default TermsCondAgreementComponent
