import React from 'react';

import { getImportsString, getKeyByState, getPropsString, imageAvatarUrl } from '../helpers';
import { omitUndefinedProps } from '@/mui/helpers';

import Playground from '../Playground/Playground';
import { AvatarGroup, UserAvatar } from '@/mui/components';

const users = [
  {
    id: 1,
    firstName: 'Bill',
    lastName: 'Simpson',
  },
  {
    id: 2,
    firstName: 'Tomas',
    lastName: 'Smith',
  },
  {
    id: 3,
    firstName: 'Fahid',
    lastName: 'Zaril',
  },
  {
    id: 4,
    firstName: 'Simon',
    lastName: 'Aurum',
  },
  {
    id: 5,
    firstName: 'Kent',
    lastName: 'Dodds',
  },
  {
    id: 6,
    firstName: 'Jed',
    lastName: 'Watson',
  },
  {
    id: 7,
    firstName: 'Tim',
    lastName: 'Neutkens',
  },
];

function AvatarSection() {
  return (
    <>
      <Playground
        title="Avatar"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['square', 'rounded', 'circular'],
            selected: 'circular',
          },
          {
            type: 'select',
            stateId: 'size',
            options: ['xSmall', 'small', 'medium', 'large'],
            selected: 'large',
          },
          {
            type: 'checkbox',
            stateId: 'withImage',
            selected: false,
          },
          {
            type: 'input-text',
            stateId: 'firstName',
            selected: 'Tomas',
          },
          {
            type: 'input-text',
            stateId: 'lastName',
            selected: 'Smith',
          },
        ]}
        renderCallback={(state) => {
          const props = omitUndefinedProps({
            ...state,
            id: 1,
            withImage: undefined,
            src: state.withImage ? imageAvatarUrl : undefined,
          });

          const importsList = getImportsString([[['UserAvatar']]]);

          return {
            component: <UserAvatar key={getKeyByState(state)} {...props} />,
            code: `${importsList}\n<UserAvatar${getPropsString({
              ...props,
              src: state.withImage ? '/src/to/avatar/...' : undefined,
            })}/>`,
          };
        }}
      />
      <Playground
        title="AvatarGroup"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: ['square', 'rounded', 'circular'],
            selected: 'circular',
          },
          {
            type: 'select',
            stateId: 'spacing',
            options: ['medium', 'small'],
            selected: 'medium',
          },
          {
            type: 'input-number',
            stateId: 'total',
            selected: 7,
          },
          {
            type: 'input-number',
            stateId: 'max',
            selected: 3,
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
          };

          const importsList = getImportsString([[['AvatarGroup', 'UserAvatar']]]);

          return {
            component: (
              <AvatarGroup {...props}>
                {users.map((user) => (
                  <UserAvatar key={user.id} id={user.id} firstName={user.firstName} lastName={user.firstName} />
                ))}
              </AvatarGroup>
            ),
            code: `${importsList}
const users = ${JSON.stringify(users.slice(0, 2), null, 2)};

<AvatarGroup${getPropsString(props)}>
  {users.map((user) => (
    <UserAvatar
      key={user.id}
      id={user.id}
      firstName={user.firstName}
      lastName={user.firstName}
    />
  ))}
</AvatarGroup>`,
          };
        }}
      />
    </>
  );
}

export default AvatarSection;
