import { useToggle } from 'hooks'

import {
  ArrowLoader,
  SubTitle,
  Title,
  ScModalContainer,
  ScBody,
  ScButton,
} from './styled'

import { useNoNetworkPopupStore } from './store'

export * from './store'

export const NoNetworkPopup = () => {
  const { isOnline } = useNoNetworkPopupStore()
  const { isOpen, toggle } = useToggle()

  if (isOnline) return null

  return (
    <ScModalContainer
      isOpen={!isOnline && !isOpen}
      withCloseButton={false}
    >
      <ScBody>
        <ArrowLoader />
        <Title t='lost_connection' />
        <SubTitle t='check_connection' />
        <ScButton onClick={toggle}>Ok</ScButton>
      </ScBody>
    </ScModalContainer>
  )
}
