import React, { useState, useEffect } from 'react';
import {isEmpty} from "lodash";
import { usePrevious } from './helpers/StateHelpers';
import { IUserStory, StoryCircleListItemProps } from './interfaces';
import OneStoryUser from "./components/OneStory/OneStoryUser";

const StoryCircleListItem = ({
  item,
  handleStoryItemPress,
  onCreate
}: StoryCircleListItemProps) => {
  const [isPressed, setIsPressed] = useState(item?.seen);

  const prevSeen = usePrevious(item?.seen);

  useEffect(() => {
    if (prevSeen != item?.seen) {
      setIsPressed(item?.seen);
    }
  }, [item?.seen]);

  const _handleItemPress = (item: IUserStory) => {
    if (handleStoryItemPress) handleStoryItemPress(item);

    setIsPressed(true);
  };

  return (
    <OneStoryUser
      item={{
        user_id: item?.user_id,
        name: item?.user_name,
        photo: item?.user_image,
        stories: item?.stories
      }}
      index={item?.user_id}
      onPress={() => !isEmpty(item?.stories) ? _handleItemPress(item) : null}
      onCreate={onCreate}
    />
  );
};

export default StoryCircleListItem;