import { StarIcon } from '@chakra-ui/icons'
import { createStandaloneToast, Flex } from '@chakra-ui/react'
import ReactDOM from 'react-dom'
import LoadingWithMask from '../components/Common/LoadingWithMask'
import { LOADER_CONTAINER } from '../constants/index'

interface toastProps {
  message?: String
  title?: String
}

const toast = createStandaloneToast({ colorMode: 'dark' })

export const toastError = ({ title = 'Error', message = 'Something went wrong!' }: toastProps) => {
  toast({
    title,
    description: message,
    status: 'error',
    duration: 3000,
    isClosable: true,
    position: 'top',
  })
}
export const toastSuccess = ({ title = '', message = 'Success' }: toastProps) => {
  toast({
    title,
    description: message,
    status: 'success',
    duration: 3000,
    isClosable: true,
    position: 'top',
  })
}

export const toastInfo = ({ title = '', message = 'Info' }: toastProps) => {
  toast({
    title,
    description: message,
    status: 'info',
    duration: 3000,
    isClosable: true,
    position: 'top',
  })
}

export const showGlobalLoading = (id = LOADER_CONTAINER) => {
  hiddenGlobalLoading()
  const node = document.getElementById(id)
  ReactDOM.render(<LoadingWithMask />, node)
  document.body.style.height = '100vh'
  document.body.style.overflow = 'hidden'
}

export const hiddenGlobalLoading = (id = LOADER_CONTAINER) => {
  document.body.style.height = 'auto'
  document.body.style.overflow = 'auto'
  const node = document.getElementById(id)
  ReactDOM.unmountComponentAtNode(node)
}

export const _renderStar = (star, starColor = 'orange.500') => {
  const starArray = new Array(5).fill(<StarIcon color={'gray'} />)
  for (let i = 1; i <= star; i++) {
    starArray[i - 1] = <StarIcon color={starColor} />
  }
  return <Flex gap={1}>{starArray}</Flex>
}