import React, { CSSProperties } from 'react';
import { CollectionSearch, CollectionSearchProps } from './CollectionSearch';
import { observer } from 'mobx-react-lite';
import { useElementSize } from 'usehooks-ts';

export interface ExpandableSearchProps extends CollectionSearchProps {
  visibility?: CSSProperties['visibility'];
}

function _ExpandableSearch({ visibility, ...rest }: CollectionSearchProps) {
  const [containerRef, { width }] = useElementSize();

  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-end',
      }}
      ref={containerRef}
    >
      <div style={{ marginLeft: 'auto' }}>
        <CollectionSearch {...rest} expandWidth={width} />
      </div>
    </div>
  );
}

export const ExpandableSearch = observer(_ExpandableSearch);