'use client';

import { __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { HighContrastSelector } from '../../utilities/index';
// Constants needed to create legends using SVG for image export
export const LEGEND_CONTAINER_MARGIN_TOP = 8;
export const LEGEND_CONTAINER_MARGIN_START = 12;
export const LEGEND_PADDING = 8;
export const LEGEND_HEIGHT = 32;
export const LEGEND_SHAPE_BORDER = 1;
const LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
// SVG strokes are drawn centered around the path, with half of the stroke width extending inward
// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,
// expand the shape accordingly.
export const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
export const LEGEND_SHAPE_MARGIN_END = 8;
export const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
/**
 * @internal
 */
export const legendClassNames = {
  root: 'fui-legend__root',
  legend: 'fui-legend__legend',
  rect: 'fui-legend__rect',
  shape: 'fui-legend__shape',
  triangle: 'fui-legend__triangle',
  text: 'fui-legend__text',
  hoverChange: 'fui-legend__hoverChange',
  resizableArea: 'fui-legend__resizableArea',
  legendContainer: 'fui-legend__legendContainer',
  annotation: 'fui-legend__annotation'
};
const useStyles = /*#__PURE__*/__styles({
  root: {
    Huce71: "fz5stix",
    a9b677: "fly5x3f",
    Bt984gj: "f122n59"
  },
  legend: {
    Bt984gj: "f122n59",
    Brf1p80: ["fc7pyfw", "fgbriwd"],
    Bceei9c: "f1k6fduh",
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "f3bhgqh",
    Byoj8tv: 0,
    uwmqm3: 0,
    z189sj: 0,
    z8tnut: 0,
    B0ocmuz: "f1t756mo",
    B9bfxx9: "fiwaqkr",
    Bf4jedk: "fy77jfu",
    ixv5ic: "f4ji673",
    Bkoo3cm: "fbcj00p",
    Blj5yig: "f15ldg54",
    Fdtwhm: "f1mwmwal"
  },
  rect: {
    Blctwrt: "fdv7tct",
    Bh9kdj0: "f1cdg9pe",
    a9b677: "frx94fk",
    t21cq0: ["f1phki43", "ff9s3yw"],
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "fpyyuzi"
  },
  shape: {
    t21cq0: ["f1phki43", "ff9s3yw"]
  },
  triangle: {
    a9b677: "f3tsq5r",
    Bqenvij: "fniina8",
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    B4g9neb: ["fnw0r6y", "f1rx5fa6"],
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    u1mtju: ["f1rx5fa6", "fnw0r6y"],
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    i8vvqc: "f8yytl1",
    t21cq0: ["f1vcna3q", "foyynoy"]
  },
  text: {
    Bahqtrf: "fk6fouc",
    Be2twd7: "fy9rknc",
    Bhrd7zp: "figsok6",
    Bg96gwp: "fwrc4pm",
    sj55zd: "f19n0e5",
    Bvjb7m6: "fhv2zbx"
  },
  hoverChange: {
    a9b677: "frx94fk",
    Bqenvij: "fvblgha",
    t21cq0: ["f1vcna3q", "foyynoy"],
    Bgfg5da: 0,
    B9xav0g: 0,
    oivjwe: 0,
    Bn0qgzm: 0,
    B4g9neb: 0,
    zhjwy3: 0,
    wvpqe5: 0,
    ibv6hh: 0,
    u1mtju: 0,
    h3c5rm: 0,
    vrafjx: 0,
    Bekrc4i: 0,
    i8vvqc: 0,
    g2u3we: 0,
    icvyot: 0,
    B4j52fo: 0,
    irswps: "fpyyuzi"
  },
  resizableArea: {
    qhf8xq: "f10pi13n",
    fsow6f: ["f1o700av", "fes3tcz"],
    Bz10aip: ["f15ivbov", "fjwp9lj"],
    Bhzewxz: "f198g47y",
    oyh7mz: ["f1ktbn1t", "ffenbu1"],
    Bf4jedk: "f93ek0f",
    B2u0y6b: "f1cgdal8",
    B4uzyy: 0,
    Be2s5ez: 0,
    u6pn5x: 0,
    smv486: 0,
    B1nu0jp: "fhpgs2q",
    B0n5ga8: 0,
    Bm2nyyq: 0,
    xrcqlc: 0,
    wywymt: "f3dcgnf",
    Gp14am: 0,
    vfts7: 0,
    Bhxzhr1: 0,
    Du69r6: ["ft9y50a", "f1lazvcb"]
  },
  legendContainer: {
    xawz: 0,
    Bh6795r: 0,
    Bnnss6s: 0,
    fkmc3a: "fd43uyw",
    jrapky: 0,
    Frg6f3: 0,
    t21cq0: 0,
    B6of3ja: 0,
    B74szlk: "fduql59"
  },
  annotation: {
    mc9l5x: "f22iagw",
    Bt984gj: "f122n59",
    i8kkvl: 0,
    Belr9w4: 0,
    rmohyg: "f4xv25i"
  }
}, {
  d: [".fz5stix{white-space:nowrap;}", ".fly5x3f{width:100%;}", ".f122n59{align-items:center;}", ".fc7pyfw{justify-content:left;}", ".fgbriwd{justify-content:right;}", ".f1k6fduh{cursor:pointer;}", [".f3bhgqh{border:none;}", {
    p: -2
  }], [".f1t756mo{padding:8px;}", {
    p: -1
  }], ".fiwaqkr{text-transform:capitalize;}", ".fy77jfu{min-width:0;}", ".frx94fk{width:12px;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", [".fpyyuzi{border:1px solid;}", {
    p: -2
  }], ".f3tsq5r{width:0;}", ".fniina8{height:0;}", [".fnw0r6y{border-left:6px solid transparent;}", {
    p: -1
  }], [".f1rx5fa6{border-right:6px solid transparent;}", {
    p: -1
  }], [".f1rx5fa6{border-right:6px solid transparent;}", {
    p: -1
  }], [".fnw0r6y{border-left:6px solid transparent;}", {
    p: -1
  }], [".f8yytl1{border-top:10.4px solid;}", {
    p: -1
  }], ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhv2zbx{forced-color-adjust:auto;}", ".fvblgha{height:12px;}", [".fpyyuzi{border:1px solid;}", {
    p: -2
  }], ".f10pi13n{position:relative;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f15ivbov{transform:translate(-50%, 0);}", ".fjwp9lj{transform:translate(50%, 0);}", ".f198g47y{top:auto;}", ".f1ktbn1t{left:50%;}", ".ffenbu1{right:50%;}", ".f93ek0f{min-width:200px;}", ".f1cgdal8{max-width:800px;}", [".fhpgs2q::after{padding:1px 4px 1px;}", {
    p: -1
  }], [".f3dcgnf::after{border-top:-2px;}", {
    p: -1
  }], [".ft9y50a::after{border-left:-2px;}", {
    p: -1
  }], [".f1lazvcb::after{border-right:-2px;}", {
    p: -1
  }], [".fd43uyw{flex:0 1 auto;}", {
    p: -1
  }], [".fduql59{margin:4px;}", {
    p: -1
  }], ".f22iagw{display:flex;}", [".f4xv25i{gap:4px;}", {
    p: -1
  }]],
  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f4ji673{color:WindowText;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fbcj00p{forced-color-adjust:none;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15ldg54:hover{color:HighlightText;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1mwmwal:hover{forced-color-adjust:none;}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdv7tct{content:var(--rect-content-high-contrast);}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1cdg9pe{opacity:var(--rect-opacity-high-contrast);}}", {
    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
  }]]
});
export const useLegendStyles = props => {
  var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;
  const {
    className
  } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
  const baseStyles = useStyles();
  return {
    root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
    legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),
    rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),
    shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),
    triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),
    text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),
    hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),
    resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),
    legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),
    annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)
  };
};