import React, {useState} from 'react';
import Button, {BUTTON_TYPE} from '@propellerads/button';

import {CookieMessageProps, POSITION} from './types';
import {
  StyledCookieCard,
  CookieAction,
  CookieInfo,
  CookieTitle,
} from './style';

const DEFAULT_COOKIE_KEY = 'accept_cookie_policy';

const CookieMessage = ({
  title = 'Cookies',
  children,
  position = POSITION.LEFT_BOTTOM,
  cookieKey = DEFAULT_COOKIE_KEY,
}: CookieMessageProps) => {
  const [isShow, setShow] = useState<boolean>(!window.localStorage.getItem(cookieKey));

  const handleClick = () => {
    window.localStorage.setItem(cookieKey, 'true');
    setShow(false);
  };

  return isShow ? (
    <StyledCookieCard position={position}>
      <CookieTitle>
        <b>{title}</b>
      </CookieTitle>

      <CookieInfo>
        {children}
      </CookieInfo>

      <CookieAction>
        <Button
          elementId="cookie-consent"
          type={BUTTON_TYPE.PRIMARY}
          onClick={handleClick}
        >
          Got it
        </Button>
      </CookieAction>
    </StyledCookieCard>
  ) : null;
};

export {CookieMessage};