import{j as f}from"./jsx-runtime-Dfk2JFgj.js";import{r as s}from"./index-CWN_QRa1.js";import{a as d}from"./index-B-lxVbXh.js";import{j as v}from"./index-DNsi8NHw.js";import"./v4-CtRu48qb.js";import"./index-CIVavKlu.js";import"./index-DllfNvuz.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./CheckGroup-BpaEcK_0.js";import"./index-6WYjB5r3.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./index-Cj3pldWQ.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";import"./index-DgIb9kCw.js";const ce={title:"Components/FilterUsers",component:v,argTypes:{usersList:{control:"object",description:"List of users to display both in the avatar list and the panel. Each user must contain id, name, avatar (URL), and isActive properties."},max:{control:{type:"number",min:1,max:10},description:"Maximum number of avatars to display before showing the '+N' indicator."},spacing:{control:{type:"number",min:0,max:50},description:"Spacing between avatars in pixels."},size:{control:{type:"select"},options:["small","medium","large"],description:"Size of avatars. Small = 24px, Medium = 40px, Large = 56px."},variant:{control:{type:"select"},options:["circular","rounded","square"],description:"Shape of avatars."},onClick:{action:"clicked",description:"Callback function when an avatar is clicked."},onClickShowMore:{action:"show more clicked",description:"Callback function when the '+N' indicator is clicked."},selectedUsers:{description:"Array of currently selected users."},onSelectUsers:{description:"Callback function triggered when users are selected or deselected."},isShowVisible:{description:"Controls the visibility of the user selection panel."},fetchMoreUsers:{description:"Function to fetch additional users for infinite scrolling. Should return a Promise with new users and a boolean indicating if more users exist."},searchUsers:{description:"Function to search users based on a query string. Should return a Promise with matching users."},className:{description:"Additional CSS class to apply to the component."},surplus:{description:"Custom value for the surplus number to display in the '+N' indicator."}},parameters:{docs:{description:{component:`
## FilterUsers

A versatile user selection component that combines avatar display with a searchable, filterable user list.

### Type Definition:

\`\`\`typescript
type User = {
  id: string;
  name: string;
  avatar: string;
  isActive: boolean;
}
\`\`\`

### Behavior Notes

1. When an avatar is clicked, it will be toggled in the \`selectedUsers\` array
2. Selected avatars display with a green outline
3. The "+N" indicator turns green when there are selected users
4. Clicking outside the component will close the panel if open
5. The panel supports infinite scrolling when \`fetchMoreUsers\` is provided
6. Users can be searched by name when \`searchUsers\` is provided
7. Selected users appear at the top of the panel for easy access
        `}}}},R=[{id:"1",name:"John Doe",avatar:"https://mui.com/static/images/avatar/1.jpg",isActive:!0},{id:"2",name:"Jane Smith DRIVERNAME janfiulfhiu43hi4uh4iu435iuh53i4uh53i4uh534iouh53i4url34uhr3ol4iuh3oe Smith DRIVERNAME janfiulfhiu43hi4uh4iu435iuh53i4uh53i4uh534iouh53i4url34uhr3ol4iuh3ol4iuhrol3uhroiu3h4o3hr3oiu4hoh3u4hro3luih43o",avatar:"https://mui.com/static/images/avatar/2.jpg",isActive:!0},{id:"3",name:"Robert Johnson",avatar:"",isActive:!0},{id:"4",name:"Emily Davis",avatar:"https://mui.com/static/images/avatar/4.jpg",isActive:!0},{id:"5",name:"Michael Wilson",avatar:"https://mui.com/static/images/avatar/5.jpg",isActive:!0},{id:"6",name:"Sarah Martinez",avatar:"https://mui.com/static/images/avatar/1.jpg",isActive:!0},{id:"7",name:"David Thompson",avatar:"https://mui.com/static/images/avatar/7.jpg"},{id:"8",name:"Lisa Anderson",avatar:"https://mui.com/static/images/avatar/8.jpg"},{id:"9",name:"Michael Brown",avatar:"https://mui.com/static/images/avatar/1.jpg"},{id:"10",name:"Olivia Davis",avatar:"https://mui.com/static/images/avatar/2.jpg"}],O=()=>{const i=[];for(let t=11;t<=800;t++)i.push({id:`${t}`,name:`User ${t}`,avatar:`https://mui.com/static/images/avatar/${t%8+1}.jpg`,isActive:t%3===0});return[...R,...i]},h=O(),J=i=>f.jsx(v,{...i}),o=J.bind({});o.args={usersList:R.slice(0,4),max:4,spacing:10,size:"medium",variant:"circular",onClick:d("Avatar clicked"),onClickShowMore:d("Show more clicked")};const c=()=>{const[i,t]=s.useState([]),[z,q]=s.useState(h.slice(0,25)),[U,D]=s.useState(0),[m,w]=s.useState(0),[p,E]=s.useState(!1),[x,y]=s.useState(!1),[M,b]=s.useState(!1),[g,N]=s.useState(""),$=s.useCallback(async()=>{if(x)return{users:[],hasMore:!0};const e=U+1;return D(e),y(!0),new Promise(l=>{setTimeout(()=>{const a=h.length>(e+1)*25,u=e*25,n=Math.min(u+25,h.length),r=h.slice(u,n);console.log(`Loaded ${r.length} new users, hasMore: ${a}`),y(!1),l({users:r,hasMore:a})},1e3)})},[U,x]),_=s.useCallback(async e=>{if(M)return{users:[],hasMore:!0};if(b(!0),e!==g)w(1),N(e);else{const l=m+1;w(l)}return new Promise(l=>{setTimeout(()=>{const a=h.filter(S=>S.name.toLowerCase().includes(e.toLowerCase())),u=25,n=(m-1)*u,r=n+u;console.log("Search results:",{searchTerm:e,lastSearchTerm:g,currentPage:m,total:a.length,start:n,end:r,currentResults:a.slice(n,r).map(S=>S.name)});const B=a.length>r;b(!1),l({users:a.slice(n,r),hasMore:B})},1e3)})},[m,M,g]);return f.jsx("div",{style:{position:"absolute",top:"20px",left:"50px",right:0},children:f.jsx(v,{usersList:z,max:3,spacing:4,surplus:1e3,size:"medium",variant:"circular",onClick:d("Avatar clicked"),onClickShowMore:()=>{E(!p),d("Show more clicked")(p)},selectedUsers:i,onSelectUsers:e=>{t(e),d("Users selected")(e)},isShowVisible:p,fetchMoreUsers:$,searchUsers:_})})};c.__docgenInfo={description:`Advanced example showing all features of FilterUsers including:
- Avatar display with surplus indicator
- User selection panel
- Search functionality
- Infinite scrolling
- Selection state management

This example demonstrates how to implement a complete user selection interface
with data loading, search, and state management.`,methods:[],displayName:"InteractiveSurplus"};var k,P,L,A,C;o.parameters={...o.parameters,docs:{...(k=o.parameters)==null?void 0:k.docs,source:{originalSource:`args => {
  return <FilterUsers {...args} />;
}`,...(L=(P=o.parameters)==null?void 0:P.docs)==null?void 0:L.source},description:{story:`Basic example of FilterUsers showing only the avatar group.

This example demonstrates:
- Displaying a small set of avatars
- Basic click handling for avatars
- Default styling and configuration`,...(C=(A=o.parameters)==null?void 0:A.docs)==null?void 0:C.description}}};var T,I,j,F,V;c.parameters={...c.parameters,docs:{...(T=c.parameters)==null?void 0:T.docs,source:{originalSource:`() => {
  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
  const [allUsers, setAllUsers] = useState<User[]>(extendedMockUsers.slice(0, 25));
  const [currentPage, setCurrentPage] = useState(0);
  const [searchPage, setSearchPage] = useState(0);
  const [isShowVisible, setIsShowVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [searchLoading, setSearchLoading] = useState(false);
  const [lastSearchTerm, setLastSearchTerm] = useState<string>('');

  // Function to simulate loading more users
  const fetchMoreUsers = useCallback(async () => {
    if (loading) {
      return {
        users: [],
        hasMore: true
      };
    }
    const nextPage = currentPage + 1;
    setCurrentPage(nextPage);
    setLoading(true);

    // Simulate a response with a delay
    return new Promise<{
      users: User[];
      hasMore: boolean;
    }>(resolve => {
      setTimeout(() => {
        // If we've already paginated all users, return hasMore: false
        const hasMore = extendedMockUsers.length > (nextPage + 1) * 25;

        // Simulate new users (25 per page)
        const startIndex = nextPage * 25;
        const endIndex = Math.min(startIndex + 25, extendedMockUsers.length);
        const newUsers = extendedMockUsers.slice(startIndex, endIndex);
        console.log(\`Loaded \${newUsers.length} new users, hasMore: \${hasMore}\`);
        setLoading(false);
        resolve({
          users: newUsers,
          hasMore
        });
      }, 1000); // 1 second delay to simulate loading
    });
  }, [currentPage, loading]);

  // Function to simulate user search via API
  const searchUsers = useCallback(async (searchTerm: string) => {
    if (searchLoading) {
      return {
        users: [],
        hasMore: true
      };
    }
    setSearchLoading(true);

    // Reset page if search term has changed
    if (searchTerm !== lastSearchTerm) {
      setSearchPage(1);
      setLastSearchTerm(searchTerm);
    } else {
      const nextPage = searchPage + 1;
      setSearchPage(nextPage);
    }

    // Simulate API search delay
    return new Promise<{
      users: User[];
      hasMore: boolean;
    }>(resolve => {
      setTimeout(() => {
        // Filter users that match the search term
        const matchedUsers = extendedMockUsers.filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()));

        // Get the current page of results
        const pageSize = 25;
        const start = (searchPage - 1) * pageSize;
        const end = start + pageSize;
        console.log('Search results:', {
          searchTerm,
          lastSearchTerm,
          currentPage: searchPage,
          total: matchedUsers.length,
          start,
          end,
          currentResults: matchedUsers.slice(start, end).map(u => u.name)
        });
        const hasMore = matchedUsers.length > end;
        setSearchLoading(false);
        // Return the current page of results and indicate if there are more
        resolve({
          users: matchedUsers.slice(start, end),
          hasMore
        });
      }, 1000);
    });
  }, [searchPage, searchLoading, lastSearchTerm]);
  return <div style={{
    position: 'absolute',
    top: '20px',
    left: '50px',
    right: 0
  }}>  
      <FilterUsers usersList={allUsers} max={3} spacing={4} surplus={1000} size="medium" variant="circular" onClick={action("Avatar clicked")} onClickShowMore={() => {
      setIsShowVisible(!isShowVisible);
      action("Show more clicked")(isShowVisible);
    }} selectedUsers={selectedUsers} onSelectUsers={users => {
      setSelectedUsers(users);
      action("Users selected")(users);
    }} isShowVisible={isShowVisible} fetchMoreUsers={fetchMoreUsers} searchUsers={searchUsers} />
    </div>;
}`,...(j=(I=c.parameters)==null?void 0:I.docs)==null?void 0:j.source},description:{story:`Advanced example showing all features of FilterUsers including:
- Avatar display with surplus indicator
- User selection panel
- Search functionality
- Infinite scrolling
- Selection state management

This example demonstrates how to implement a complete user selection interface
with data loading, search, and state management.`,...(V=(F=c.parameters)==null?void 0:F.docs)==null?void 0:V.description}}};const le=["AvatarsOnly","InteractiveSurplus"];export{o as AvatarsOnly,c as InteractiveSurplus,le as __namedExportsOrder,ce as default};
