import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import { BAR_POSITIONS } from "../constants";

/** Buttons › Sticky compare bar. */
const BarSection = () => {
  const [enabled] = useSetting("bar.enabled", true);

  return (
    <SettingsCard
      title={__("Sticky compare bar", "product-comparison-for-woocommerce")}
      description={__(
        "The bar with the chosen products, “+ Add more” and Compare now.",
        "product-comparison-for-woocommerce",
      )}
    >
      <SwitchSetting
        path="bar.enabled"
        title={__("Show the bar", "product-comparison-for-woocommerce")}
        description={__(
          "Appears after the first product is added.",
          "product-comparison-for-woocommerce",
        )}
      />
      {enabled && (
        <>
          <ChoiceSetting
            path="bar.position"
            title={__("Position", "product-comparison-for-woocommerce")}
            options={BAR_POSITIONS}
          />
          <SwitchSetting
            path="bar.add_more_search"
            title={__(
              "“+ Add more” search",
              "product-comparison-for-woocommerce",
            )}
            description={__(
              "Shoppers search and add products without leaving the bar.",
              "product-comparison-for-woocommerce",
            )}
          />
        </>
      )}
    </SettingsCard>
  );
};

export default BarSection;