default-category-list-bs.tsx

import BottomSheetDynamic from 'components-update/atoms/container/bottom-sheet-dynamic';
import Divider from 'components-update/atoms/marker/divider';
import Icon from 'components-update/atoms/output/icon';
import { useLanguage } from 'Helpers/translation-helper';
import React, { useState } from 'react';
export enum DISPLAYED_CATEGORY_LIST {
  NAME = 'name',
}

export interface IDefaultCategoryListBs {
  displayedData: DISPLAYED_CATEGORY_LIST;
  onChange: (e: any) => void;
  content: any;
  activeId?: number;
  isShown?: boolean;
  testingKey?: string;
  isTranslate?: boolean;
}

const MemoizedDivider = React.memo(Divider);
const MemoizedIcon = React.memo(Icon);

const BSText: React.FC<any> = ({
  text,
}) => {
  return <>{useLanguage(text)}</>;
};

export const DefaultCategoryListBs = (props: IDefaultCategoryListBs, ref: any) => {
  const [bsOpen, setBsOpen] = useState(props.isShown);
  const handleSelect = (e: any) => {
    setBsOpen(false);
    props.onChange && props.onChange(e);
    document.body.style.overflow = 'unset';
  };
  React.useImperativeHandle(ref, () => ({
    openModal() {
      setBsOpen(true);
    },
  }));

  const BSContent = props.content?.map((e: any, index: number) => {
    return (
      <div
        key={index}
        onClick={() => handleSelect(e)}
        className='w-full flex flex-col justify-between h-12 text-base cursor-pointer'>
        <div className='w-full my-auto flex flex-row justify-between items-center'>
          <p className={`${props.activeId !== e.id ? '' : 'text-cyanBlue'}`}> {props.isTranslate ? <BSText text={e[props.displayedData]} /> : e[props.displayedData]}</p>
          <div className={`${props.activeId !== e.id ? 'hidden' : ''}`}>
            <MemoizedIcon name='check' color='cyanBlue' size='small' />
          </div>
        </div>
        <MemoizedDivider />
      </div>
    );
  });

  return (
    <BottomSheetDynamic show={bsOpen} close={() => setBsOpen(false)}>
      <div className='w-full p-4'>
        <div className='text-lg font-bold'>{useLanguage('pilih_kategori_kendala')}</div>
        <div data-cy={'list-' + props.testingKey}>{BSContent}</div>
      </div>
    </BottomSheetDynamic>
  );
};

export default React.forwardRef(DefaultCategoryListBs);