/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import { PropsWithChildren } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { CaretDownIcon, ListIconIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { CREATE_VERSION } from '@/utils/constants';

export const MoreOptionsWrapper = observer(
  ({ children }: PropsWithChildren) => {
    const { createV2, session } = useStores();
    return (
      <div
        className={clsx(
          'flex flex-col overflow-hidden rounded-[20px] bg-background-secondary'
        )}
      >
        <div
          className={clsx(
            'flex h-[60px] flex-row items-center gap-[5px] px-4',
            {
              'cursor-pointer hover:bg-background-fog-thin':
                !session.flags?.['auk-go-live'],
            }
          )}
          onClick={(e) => {
            if (!session.flags?.['auk-go-live']) {
              const previousIsCollapsed = createV2.isMoreOptionsCollapsed;
              createV2.setIsMoreOptionsCollapsed(!previousIsCollapsed);
              logWebUserEvent({
                actionName: 'ChangeMoreOptionsVisibility',
                context: {
                  visibilityBefore: !previousIsCollapsed,
                  visibilityAfter: previousIsCollapsed,
                  createVersion: CREATE_VERSION,
                },
              });
              e.stopPropagation();
            }
          }}
        >
          <ListIconIcon className='h-4 w-4' />
          <span className='flex-1 font-sans font-medium'>More Options</span>
          {session.flags?.['auk-go-live'] ? null : (
            <Button
              variant={ButtonVariant.Glass}
              shape={ButtonShape.Pill}
              size={ButtonSize.Mini}
              aria-label={
                createV2.isMoreOptionsCollapsed
                  ? 'Expand more options'
                  : 'Collapse more options'
              }
              onClick={(e) => {
                const previousIsCollapsed = createV2.isMoreOptionsCollapsed;
                createV2.setIsMoreOptionsCollapsed(!previousIsCollapsed);
                logWebUserEvent({
                  actionName: 'ChangeMoreOptionsVisibility',
                  context: {
                    visibilityBefore: !previousIsCollapsed,
                    visibilityAfter: previousIsCollapsed,
                    createVersion: CREATE_VERSION,
                  },
                });
                e.stopPropagation();
              }}
              iconClassName={clsx(
                'transition-transform duration-500 ease-in-out',
                {
                  'rotate-180': !createV2.isMoreOptionsCollapsed,
                }
              )}
              icon={CaretDownIcon}
            />
          )}
        </div>
        <div
          className={clsx(
            'h-auto overflow-y-hidden transition-all duration-1000 ease-in-out',
            {
              'max-h-0':
                createV2.isMoreOptionsCollapsed &&
                !session.flags?.['auk-go-live'],
              'max-h-[800px]':
                !createV2.isMoreOptionsCollapsed ||
                session.flags?.['auk-go-live'],
            }
          )}
        >
          {children}
        </div>
      </div>
    );
  }
);