// _borders.scss
// Border utility classes for NuvoUI

@use "sass:math";
@use "sass:map";
@use "sass:meta";
@use "sass:string" as str;
@use "sass:list";

@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../config/borders" as config-border;
@use "../config/colors" as config-color;
@use "../functions/feature-flags" as fn-flags;
@use "../functions/units" as fn-units;

// Common border styles
$border-styles: (solid, dashed, dotted, double, none);

@function get-rounded-value($val) {
    @if not $val {
        @return map.get(config-border.$border-radii, "md");
    } @else if meta.type-of($val) == "string" {
        $clean-val: $val;

        // Try to find the value in the border-radii map
        @if map.has-key(config-border.$border-radii, $clean-val) {
            @return map.get(config-border.$border-radii, $clean-val);
        } @else if map.has-key(config-border.$border-radii, str.unquote($clean-val)) {
            @return map.get(config-border.$border-radii, str.unquote($clean-val));
        } @else {
            // Not a predefined value, process it as a custom value
            @return fn-units.fix-units($val);
        }
    } @else {
        // Case 3: $val is a custom value, ensure it has units
        @return fn-units.fix-units($val);
    }
}

// -----------------------------------------------
// MIXINS
// -----------------------------------------------

// Core Border Mixins - improved to include style and color by default
// SKIP Documentation
@mixin border($val, $style: solid, $color: var(--border-base)) {
    $val: fn-units.fix-units($val, px);

    --border-size: #{$val};

    border-width: $val;
    @if $val != 0 {
        border-style: $style;
        border-color: $color;

        --border-style: #{$style};
        --border-color: #{$color};
    }
}

@mixin border-top($val, $style: var(--border-style, solid)) {
    $val: fn-units.fix-units($val, px);

    border-top-width: $val;
    @if $val != 0 {
        border-top-style: $style;
        border-top-color: var(--border-base);
    }
}

@mixin border-right($val, $style: var(--border-style, solid)) {
    $val: fn-units.fix-units($val, px);

    border-right-width: $val;
    @if $val != 0 {
        border-right-style: $style;
        border-right-color: var(--border-base);
    }
}

@mixin border-bottom($val, $style: var(--border-style, solid)) {
    $val: fn-units.fix-units($val, px);

    border-bottom-width: $val;
    @if $val != 0 {
        border-bottom-style: $style;
        border-bottom-color: var(--border-base);
    }
}

@mixin border-left($val, $style: var(--border-style, solid)) {
    $val: fn-units.fix-units($val, px);

    border-left-width: $val;
    @if $val != 0 {
        border-left-style: $style;
        border-left-color: var(--border-base);
    }
}

// @description Applies border radius to all corners
// @param {String} $val - The border radius value
@mixin rounded($val: null) {
    border-radius: get-rounded-value($val);
}

@mixin rounded-t($val: null) {
    $val: get-rounded-value($val);

    border-top-left-radius: $val;
    border-top-right-radius: $val;
}

@mixin rounded-r($val: null) {
    $val: get-rounded-value($val);

    border-top-right-radius: $val;
    border-bottom-right-radius: $val;
}

@mixin rounded-b($val: null) {
    $val: get-rounded-value($val);

    border-bottom-left-radius: $val;
    border-bottom-right-radius: $val;
}

@mixin rounded-l($val: null) {
    $val: get-rounded-value($val);

    border-top-left-radius: $val;
    border-bottom-left-radius: $val;
}

@mixin rounded-tl($val: null) {
    $val: get-rounded-value($val);

    border-top-left-radius: $val;
}
@mixin rounded-tr($val: null) {
    $val: get-rounded-value($val);

    border-top-right-radius: $val;
}
@mixin rounded-br($val: null) {
    $val: get-rounded-value($val);

    border-bottom-right-radius: $val;
}
@mixin rounded-bl($val: null) {
    $val: get-rounded-value($val);

    border-bottom-left-radius: $val;
}

// Border Style and Color
@mixin border-style($style) {
    --border-style: #{$style};
}
@mixin border-color($color) {
    border-color: $color;

    --border-color: #{$color};
}

// Combined border properties
@mixin border-all($width, $style, $color) {
    border-width: $width;
    border-style: $style;
    border-color: $color;
}

@mixin pill {
    @include rounded(9999px);
}

@if fn-flags.feature-enabled("borders") {
    // Basic border classes (all sides)
    #{config-flags.$parent-selector} .border {
        @include border(1);
    }

    // Common shortcuts for single-side borders
    #{config-flags.$parent-selector} .border-0 {
        @include border(0);
    }

    #{config-flags.$parent-selector} .border-t {
        @include border-top(1);
    }

    #{config-flags.$parent-selector} .border-r {
        @include border-right(1);
    }

    #{config-flags.$parent-selector} .border-b {
        @include border-bottom(1);
    }

    #{config-flags.$parent-selector} .border-l {
        @include border-left(1);
    }

    #{config-flags.$parent-selector} .border-x {
        @include border-left(1);
        @include border-right(1);
    }

    #{config-flags.$parent-selector} .border-y {
        @include border-top(1);
        @include border-bottom(1);
    }

    // Directional border width
    @each $width in config-border.$border-widths {
        #{config-flags.$parent-selector} .border-#{$width},
        #{config-flags.$parent-selector} .hover\:border-#{$width}:hover,
        #{config-flags.$parent-selector} .active\:border-#{$width}:active,
        #{config-flags.$parent-selector} .focus\:border-#{$width}:focus,
        #{config-flags.$parent-selector} .group:hover .group-hover\:border-#{$width} {
            @include border($width);
        }
        #{config-flags.$parent-selector} .border-t-#{$width} {
            @include border-top($width);
        }
        #{config-flags.$parent-selector} .border-r-#{$width} {
            @include border-right($width);
        }
        #{config-flags.$parent-selector} .border-b-#{$width} {
            @include border-bottom($width);
        }
        #{config-flags.$parent-selector} .border-l-#{$width} {
            @include border-left($width);
        }

        #{config-flags.$parent-selector} .border-x-#{$width} {
            @include border-left($width);
            @include border-right($width);
        }

        #{config-flags.$parent-selector} .border-y-#{$width} {
            @include border-top($width);
            @include border-bottom($width);
        }
    }

    // Border radius classes
    #{config-flags.$parent-selector} .rounded {
        @include rounded;
    }
    #{config-flags.$parent-selector} .square {
        @include rounded(0);
    } // Alias for no radius

    @each $name, $value in config-border.$border-radii {
        #{config-flags.$parent-selector} .rounded-#{$name} {
            @include rounded($value);
        }
        #{config-flags.$parent-selector} .rounded-t-#{$name} {
            @include rounded-t($value);
        }
        #{config-flags.$parent-selector} .rounded-r-#{$name} {
            @include rounded-r($value);
        }
        #{config-flags.$parent-selector} .rounded-b-#{$name} {
            @include rounded-b($value);
        }
        #{config-flags.$parent-selector} .rounded-l-#{$name} {
            @include rounded-l($value);
        }

        // Individual corners
        #{config-flags.$parent-selector} .rounded-tl-#{$name} {
            @include rounded-tl($value);
        }
        #{config-flags.$parent-selector} .rounded-tr-#{$name} {
            @include rounded-tr($value);
        }
        #{config-flags.$parent-selector} .rounded-br-#{$name} {
            @include rounded-br($value);
        }
        #{config-flags.$parent-selector} .rounded-bl-#{$name} {
            @include rounded-bl($value);
        }
    }

    // Pill shape (alias for full radius)
    #{config-flags.$parent-selector} .pill {
        @include pill;
    }

    // Border styles - these override the default solid style if needed
    @each $style in $border-styles {
        #{config-flags.$parent-selector} .border-#{$style},
        #{config-flags.$parent-selector} .hover\:border-#{$style}:hover,
        #{config-flags.$parent-selector} .active\:border-#{$style}:active,
        #{config-flags.$parent-selector} .focus\:border-#{$style}:focus,
        #{config-flags.$parent-selector} .group:hover .group-hover\:border-#{$style} {
            @include border-style($style);
        }
    }

    @each $color-name in config-color.$color-names-with-basic {
        #{config-flags.$parent-selector} .border-#{$color-name},
        #{config-flags.$parent-selector} .hover\:border-#{$color-name}:hover,
        #{config-flags.$parent-selector} .active\:border-#{$color-name}:active,
        #{config-flags.$parent-selector} .focus\:border-#{$color-name}:focus,
        #{config-flags.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
            @include border-color(var(--#{$color-name}));
        }
    }

    // -----------------------------------------------
    // RESPONSIVE CLASSES
    // -----------------------------------------------

    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: #{$width}) {
            // Border width responsive
            @each $val in config-border.$border-widths {
                #{config-flags.$parent-selector} .border-#{$val}\@#{$breakpoint} {
                    @include border($val);
                }
            }

            // Common shortcuts for responsive
            #{config-flags.$parent-selector} .border\@#{$breakpoint} {
                @include border(1);
            }
            #{config-flags.$parent-selector} .border-0\@#{$breakpoint} {
                @include border(0);
            }

            // Border radius responsive
            @each $name, $value in config-border.$border-radii {
                #{config-flags.$parent-selector} .rounded-#{$name}\@#{$breakpoint} {
                    @include rounded($value);
                }
            }

            #{config-flags.$parent-selector} .rounded\@#{$breakpoint} {
                @include rounded;
            }
            #{config-flags.$parent-selector} .square\@#{$breakpoint} {
                @include rounded(0);
            }
            #{config-flags.$parent-selector} .pill\@#{$breakpoint} {
                @include pill;
            }
        }
    }
}