import React, { memo } from '../../../lib/teact/teact';

import buildClassName from '../../../util/buildClassName';

import useOldLang from '../../../hooks/useOldLang';

import Button from '../../ui/Button';
import Modal, { type OwnProps as ModalProps } from '../../ui/Modal';

import styles from './PickerModal.module.scss';

type OwnProps = {
  confirmButtonText?: string;
  isConfirmDisabled?: boolean;
  shouldAdaptToSearch?: boolean;
  withFixedHeight?: boolean;
  onConfirm?: NoneToVoidFunction;
} & ModalProps;

const PickerModal = ({
  confirmButtonText,
  isConfirmDisabled,
  shouldAdaptToSearch,
  withFixedHeight,
  onConfirm,
  ...modalProps
}: OwnProps) => {
  const lang = useOldLang();

  return (
    <Modal
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...modalProps}
      isSlim
      className={buildClassName(
        shouldAdaptToSearch && styles.withSearch,
        withFixedHeight && styles.fixedHeight,
        modalProps.className,
      )}
      contentClassName={buildClassName(styles.content, modalProps.contentClassName)}
      headerClassName={buildClassName(styles.header, modalProps.headerClassName)}
    >
      {modalProps.children}
      <div className={styles.buttonWrapper}>
        <Button
          onClick={onConfirm || modalProps.onClose}
          color="primary"
          size="smaller"
          disabled={isConfirmDisabled}
        >
          {confirmButtonText || lang('Confirm')}
        </Button>
      </div>
    </Modal>
  );
};

export default memo(PickerModal);
