import { FC, memo } from 'react';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { useTranslation } from 'src/components/dashboard/chat/i18n';

import Tabs from 'src/components/tabs';

import GroupList from './GroupList';
import PeopleList from './PeopleList';

export type SearchPeopleOrGroupProps = {
  query: string;
  users: any;
  setUsers: any;
  groups: any;
  setGroups: any;
};

const renderTabs = (
  query,
  users,
  setUsers,
  groups,
  setGroups,
  t,
  tLokalise,
) => [
  {
    id: tLokalise('PEOPLE'),
    title: tLokalise('PEOPLE'),
    content: (
      <PeopleList
        query={query}
        users={users}
        setUsers={setUsers}
      />
    ),
  },
  {
    id: t('GROUPS'),
    title: t('GROUPS'),
    content: (
      <GroupList
        query={query}
        limit={10}
        listContainerStyle={{ backgroundColor: '#f4f5f7' }}
        listSubHeaderStyle={{ backgroundColor: '#f4f5f7' }}
        groups={groups}
        setGroups={setGroups}
      />
    ),
  },
];

export const SearchPeopleOrGroup: FC<SearchPeopleOrGroupProps> = props => {
  const { query, users, setUsers, groups, setGroups } = props;

  const { t } = useTranslation();
  const { t: tLokalise } = useLokaliseTranslation('people');

  return (
    <Tabs
      id="search-people"
      tabs={renderTabs(query, users, setUsers, groups, setGroups, t, tLokalise)}
      tabsProps={{
        variant: 'fullWidth',
      }}
      tabProps={{
        wrapped: true,
        sx: {
          minWidth: '0px !important',
        },
      }}
      tabPanelProps={{
        withScrollbar: true,
        options: { suppressScrollX: true },
      }}
    />
  );
};
export default memo(SearchPeopleOrGroup);