import { Image } from '@tarojs/components';
import { NodesRef } from '@tarojs/taro';

import { useCallback, useState } from 'react';

import JobList from '@/components/job-list';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { logWithPrefix } from '@/utils/common';

import './index.less';

const PREFIX = 'follow-group';
const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
const SAFE_PADDING_BOTTOM_CLASS = `${PREFIX}__safe-padding-bottom`;
const CALC_LIST_PROPS: IUseListHeightProps = {
  selectors: [`.${PREFIX}`, `.${SAFE_PADDING_BOTTOM_CLASS}`],
  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
    const [pageRect, safePaddingRect] = rects;
    return pageRect.height - safePaddingRect.height;
  },
};
const log = logWithPrefix(PREFIX);

const NoFollowTips = () => {
  return (
    <div className={`${PREFIX}__empty-container`}>
      <Image className={`${PREFIX}__empty-box`} src={require('@/statics/svg/empty-box.svg')} mode="aspectFit" />
      <div className={`${PREFIX}__empty-text`}>暂无关注的群</div>
    </div>
  );
};

function FollowGroup() {
  const [isEmpty, setIsEmpty] = useState(false);
  const listHeight = useListHeight(CALC_LIST_PROPS);
  log('list height', listHeight);

  const handleListEmpty = useCallback(() => {
    setIsEmpty(true);
  }, []);

  return (
    <div className={PREFIX}>
      {!isEmpty && (
        <JobList
          visible
          isFollow
          className={LIST_CONTAINER_CLASS}
          listHeight={listHeight}
          onListEmpty={handleListEmpty}
        />
      )}
      {isEmpty && <NoFollowTips />}
      <SafeBottomPadding className={SAFE_PADDING_BOTTOM_CLASS} />
    </div>
  );
}

export default FollowGroup;
