import * as React from "react";
import PropTypes from "prop-types";
import Button from "@crave/farmblocks-button";
import Popover from "@crave/farmblocks-popover";
import FormWrapper from "@crave/farmblocks-form-wrapper";
import { SmChevronDown, SmCheckFilled } from "@crave/farmblocks-icon";

const FilterPopover = props => {
  return (
    <Popover
      className={props.className}
      tooltipProps={{
        padding: "0px",
        ...props.tooltipProps,
      }}
      trigger={isVisible => (
        <Button
          className="trigger"
          rightIcon={<SmChevronDown />}
          css="box-shadow: none; button::-moz-focus-inner { border: 10px dotted red; }"
          small
          active={isVisible || props.hasValue}
        >
          {props.triggerLabel}

          {props.hasValue && (
            <div className="icon" style={{ marginLeft: 8 }}>
              <SmCheckFilled />
            </div>
          )}
        </Button>
      )}
      content={dismiss => (
        <FormWrapper
          className="formWrapper"
          onCancel={e => {
            dismiss();
            props.onFormCancelClick?.(e);
          }}
          onSave={e => {
            if (props.dismissOnSave) {
              dismiss();
            }
            props.onFormSaveClick(e, dismiss);
          }}
          saveLabel={props.formSaveLabel}
          cancelLabel={props.formCancelLabel}
          title={props.formTitle}
          loading={props.formLoading}
          saveButtonProps={{ small: true }}
        >
          {typeof props.formContent === "function"
            ? props.formContent(dismiss)
            : props.formContent}
        </FormWrapper>
      )}
    />
  );
};

FilterPopover.defaultProps = {
  formSaveLabel: "Filter",
};

FilterPopover.propTypes = {
  triggerLabel: PropTypes.string.isRequired,
  formTitle: PropTypes.string,
  formContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  formLoading: PropTypes.bool,
  formSaveLabel: PropTypes.string,
  formCancelLabel: PropTypes.string,
  onFormSaveClick: PropTypes.func,
  onFormCancelClick: PropTypes.func,
  // eslint-disable-next-line react/forbid-prop-types
  tooltipProps: PropTypes.object,
  dismissOnSave: PropTypes.bool,
  hasValue: PropTypes.bool,
  className: PropTypes.string,
};

export default FilterPopover;

@@ -594,17 +594,31 @@
     css=
-%22
+%7B%60%0A            
 box-shad
@@ -630,63 +630,118 @@
 one;
- button::-moz-focus-inner %7B border: 10px dotted red; %7D%22
+%0A            span %7B%0A              display: flex;%0A              align-items: center;%0A            %7D%0A          %60%7D
 %0A   

set a flex container for button contents