import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';
import { CgClose } from 'react-icons/cg';
import chooseIcon from '@utils/chooseIcon';
import chooseTitle from '@utils/chooseTitle';
import { ToastPortal } from '@components/ToastPortal/index.jsx';
import theme from '@src/theme';
import {
  ToastWrapper,
  Text,
  Icon,
  Title,
  TextContainer,
  CloseButton,
} from './style';

const ToastItem = ({
  id,
  text,
  variant,
  title,
  bgColor,
  iconAndTextColor,
  spacing,
  animation,
  deleteToastById,
  position,
  timer,
}) => {
  if (text === null && title === null) {
    title = chooseTitle(variant);
  }
  const deleteToast = () => {
    deleteToastById(id);
  };

  useEffect(() => {
    if (timer) {
      const timeout = setTimeout(() => deleteToastById(id), timer * 1000);
      return () => clearTimeout(timeout);
    }
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <ToastPortal position={position} data-cy="portal">
        <ToastWrapper
          data-cy="toast"
          iconAndTextColor={iconAndTextColor}
          variant={variant}
          bgColor={bgColor}
          spacing={spacing}
          animation={animation}
        >
          <Icon>{chooseIcon(variant)}</Icon>
          <TextContainer>
            <Title>{title}</Title>
            <Text>{text}</Text>
          </TextContainer>

          <CloseButton onClick={deleteToast} data-cy="close-btn">
            <CgClose />
          </CloseButton>
        </ToastWrapper>
      </ToastPortal>
    </ThemeProvider>
  );
};

ToastItem.propTypes = {
  id: PropTypes.number.isRequired,
  text: PropTypes.string,
  variant: PropTypes.string,
  title: PropTypes.string,
  bgColor: PropTypes.string,
  iconAndTextColor: PropTypes.string,
  spacing: PropTypes.string,
  animation: PropTypes.string,
  deleteToastById: PropTypes.func.isRequired,
  position: PropTypes.string,
  timer: PropTypes.number,
};

ToastItem.defaultProps = {
  text: null,
  variant: 'success',
  title: null,
  bgColor: null,
  iconAndTextColor: null,
  spacing: '10',
  animation: 'slideRight',
  position: 'bottom-right',
  timer: 5,
};
export const Toast = React.memo(ToastItem);