import { getModule, getModuleByDisplayName } from '@vizality/webpack';
import { joinClassNames } from '@vizality/util/dom';
import { toKebabCase } from '@vizality/util/string';
import { getCaller } from '@vizality/util/file';
import React, { memo } from 'react';

import { FormItem, FormText, Tooltip, Button, Divider } from '..';

/**
 * 
 * @component
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export default memo(props => {
  const { note, children, tooltipText, tooltipPosition, success, color, disabled, onClick, button, id } = props;
  const Flex = getModuleByDisplayName('Flex');
  const flex = joinClassNames(Flex.Direction.VERTICAL, Flex.Justify.START, Flex.Align.STRETCH, Flex.Wrap.NO_WRAP);
  const { description } = getModule('formText', 'description');
  const { marginBottom20 } = getModule('marginTop20');
  const { labelRow, title } = getModule('labelRow');
  return (
    <FormItem className={joinClassNames('vz-settings-item', 'vz-settings-button-item', flex, marginBottom20)}>
      <div
        className='vz-settings-button-item-inner'
        id={id || `setting-button-${toKebabCase(getCaller()?.id)}-${children.toString()}`}
      >
        <div className='vz-settings-button-item-info'>
          <div className={labelRow}>
            <label className={title}>
              {children}
            </label>
          </div>
          <FormText className={description}>
            {note}
          </FormText>
        </div>
        <Tooltip
          text={tooltipText}
          position={tooltipPosition}
          shouldShow={Boolean(tooltipText)}
          className='vz-settings-button-item-button-wrapper'
        >
          <Button
            color={success ? Button.Colors.GREEN : color || Button.Colors.BRAND}
            disabled={disabled}
            onClick={onClick}
            style={{ marginLeft: 5 }}
            className='vz-settings-button-item-button'
          >
            {button}
          </Button>
        </Tooltip>
      </div>
      <Divider />
    </FormItem>
  );
});
