@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$form-item-margin-bottom: () !default;
$form-item-margin-bottom: map.merge(
  (
    'default': 16px,
    'large': 16px,
    'medium': 16px,
    'small': 16px,
    'mini': 16px,
  ),
  $form-item-margin-bottom
);

$form-item-line-height: () !default;
$form-item-line-height: map.merge($common-component-size, $form-item-line-height);

$form-item-error-padding-top: () !default;
$form-item-error-padding-top: map.merge(
  (
    'default': 4px,
    'large': 4px,
    'medium': 4px,
    'small': 4px,
    'mini': 4px,
  ),
  $form-item-error-padding-top
);

$form-item-error-padding-left: 12px;

$form-item-label-top-line-height: () !default;
$form-item-label-top-line-height: map.merge(
  (
    'default': 16px,
    'large': 16px,
    'medium': 16px,
    'small': 16px,
    'mini': 16px,
  ),
  $form-item-label-top-line-height
);

$form-item-label-top-margin-bottom: () !default;
$form-item-label-top-margin-bottom: map.merge(
  (
    'default': 6px,
    'large': 6px,
    'medium': 6px,
    'small': 6px,
    'mini': 6px,
  ),
  $form-item-label-top-margin-bottom
);

@include b(form) {
  @include set-component-css-var('form', $form);
  @include m(inline) {
    .#{$namespace}-form-item {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 32px;
    }

    &.#{$namespace}-form--label-top {
      display: flex;
      flex-wrap: wrap;

      .#{$namespace}-form-item {
        display: block;
      }
    }
  }

  .el-form-title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    padding-bottom: 8px;
    margin-top: 32px;
    border-bottom: 1px solid var(--el-color-neutral-light-3);

    &:first-child {
      margin-top: 0;
    }
  }
}

@include b(form-item) {
  display: flex;
  --font-size: #{map.get($input-font-size, 'default')};
  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};

  &:last-child {
    // margin-bottom: 0;
  }

  .#{$namespace}-form-item {
    margin-bottom: 0;
  }

  .#{$namespace}-input__validateIcon {
    display: none;
  }

  // TODO: Form Size'ı bu şekilde değiştirdim kontrol et: @each $size in (large, default, small) {
  @each $size in $sizes {
    @include m($size) {
      margin-bottom: #{map.get($form-item-margin-bottom, $size)};

      @include e(label) {
        height: #{map.get($form-item-line-height, $size)};
        line-height: #{map.get($form-item-line-height, $size)};
      }

      @include e(content) {
        line-height: #{map.get($form-item-line-height, $size)};
      }

      @include e(error) {
        padding-top: #{map.get($form-item-error-padding-top, $size)};
      }
    }
  }

  @include m(label-left) {
    .#{$namespace}-form-item__label {
      justify-content: flex-start;
    }
  }

  @include m(label-top) {
    display: flex;
    flex-direction: column;

    .#{$namespace}-form-item__label {
      height: auto;
      text-align: left;
      margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
      line-height: #{map.get($form-item-label-top-line-height, 'default')};
    }
  }

  @include e(label-wrap) {
    display: flex;
  }

  @include e(label) {
    display: inline-flex;
    white-space: nowrap;
    // justify-content: flex-end;
    // align-items: flex-start;

    flex: 0 0 auto;
    font-size: getCssVar('form-label-font-size');
    font-weight: getCssVar('form-label-font-weight');
    color: getCssVar('color-neutral-light-9');

    height: #{map.get($form-item-line-height, 'default')};
    line-height: #{map.get($form-item-line-height, 'default')};

    padding: 0;
    box-sizing: border-box;
    gap: 4px;
  }

  @include e(content) {
    display: flex;
    flex-wrap: wrap;
    // align-items: flex-end;
    flex: 1;
    line-height: #{map.get($form-item-line-height, 'default')};
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
    // flex-direction: column; -> Bu şekilde değiştirdim kontrol et (http://localhost:2000/sites/v2/560/detail/networks/tun0/configuration)  access_restriction checkbox'ları alt alta geliyordu.

    .#{$namespace}-input-group {
      vertical-align: top;
    }
  }

  @include e(error) {
    color: getCssVar('color-danger');
    font-size: 10px;
    line-height: 14px;
    padding-top: #{map.get($form-item-error-padding-top, 'default')};
    padding-left: $form-item-error-padding-left;
    // position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    @include m(inline) {
      position: relative;
      top: auto;
      left: auto;
      display: inline-block;
      margin-left: 10px;
    }
  }

  @include when(required) {
    @include pseudo('not(.is-no-asterisk)') {
      &.asterisk-left {
        > .#{$namespace}-form-item__label:before,
        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
          content: '*';
          color: getCssVar('color-danger');
          // margin-right: 4px;
        }
      }

      &.asterisk-right {
        > .#{$namespace}-form-item__label:after,
        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:after {
          content: '*';
          color: getCssVar('color-neutral-light-9');
          margin-left: 4px;
        }
      }
    }
  }

  @include when(error) {
    .#{$namespace}-input__wrapper,
    .#{$namespace}-textarea__inner,
    .#{$namespace}-select__wrapper {
      &,
      &:hover,
      &:focus,
      &.is-focus {
        box-shadow: 0 0 0 1px getCssVar('color-danger') inset;
        z-index: 1;
      }
    }

    .#{$namespace}-input-group__append,
    .#{$namespace}-input-group__prepend {
      .#{$namespace}-input__wrapper {
        box-shadow: 0 0 0 1px transparent inset;
      }

      .#{$namespace}-input__validateIcon {
        display: none;
      }
    }

    .#{$namespace}-input__validateIcon {
      color: getCssVar('color-danger');
    }
  }

  @include m(feedback) {
    .#{$namespace}-input__validateIcon {
      display: inline-flex;
    }
  }
}

@include b(form-items) {
  display: flex;
  gap: 30px;
  flex-grow: 1;
  position: relative;

  &.sticky {
    gap: 0;

    > :first-child {
      [class*='__wrapper'] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    :not(:first-child):not(:last-child) {
      [class*='__wrapper'] {
        border-radius: 0;
        margin-left: -1px;
      }
    }

    > :last-child:not(:first-child) {
      [class*='__wrapper'],
      [class*='__content'] .el-button,
      &.el-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: -1px;
        // z-index: 1;
      }
    }

    > :last-child:not(:first-child) {
      [class*='__content'] .el-button,
      &.el-button {
        z-index: 1;
      }
    }

    [class*='__wrapper'] {
      &:hover,
      &.is-focused,
      &.is-focus,
      &.is-hovering {
        z-index: 1;
      }
    }

    .el-button {
      &:hover,
      &:active {
        z-index: 1;
      }
    }
  }

  .el-form-item:not(:has([class*='label'])) {
    margin-top: #{map.get($form-item-label-top-line-height, 'default') + map.get($form-item-label-top-margin-bottom, 'default')};
  }
}