@use './mixin.scss';
@use '../../styles/bootstrap/mixins/text-truncate';
@use '../../styles/variables.scss';

.thy-tree {
    display: block;
    overflow: hidden;
    position: relative;
    color: variables.$gray-700;
    padding: variables.$tree-padding;
    transform: translateY(-10px);

    &-node {
        display: block;
        padding: variables.$tree-node-padding;

        &-wrapper {
            display: flex;
            cursor: variables.$hand-cursor;
            align-items: center;
            padding: variables.$tree-node-wrapper-padding;
            height: variables.$tree-node-wrapper-height;
            border: 2px solid transparent;

            .thy-tree-index {
                display: inline-block;
            }

            .thy-tree-expand {
                width: 16px;
                line-height: 16px;
                color: variables.$gray-600;
                text-align: center;
                margin-right: 8px;
                display: inline-block;

                &-icon {
                    display: inline-block;
                }

                &:hover {
                    color: variables.$gray-700;
                }
            }

            .thy-tree-drag-icon {
                cursor: variables.$hand-cursor;
                position: absolute;
                left: 4px;
                padding: 0;
                color: variables.$gray-500;
                visibility: hidden;
            }

            .thy-tree-node-content {
                width: 1px;
                flex: 1;
                display: flex;
                align-items: center;
                height: variables.$tree-node-wrapper-height;

                .thy-tree-node-icon {
                    color: variables.$gray-500;
                    margin-right: 8px;
                }

                .thy-tree-node-check {
                    margin-top: 0;
                    margin-right: 6px;
                    &:checked.form-check-indeterminate,
                    &:checked.form-unchecked {
                        background: unset;
                        border-color: variables.$gray-300;
                    }
                    &:checked.form-unchecked {
                        &:after {
                            opacity: 0;
                        }
                    }
                }

                .thy-tree-node-title {
                    flex: 1;

                    &.truncate {
                        @include text-truncate.text-truncate();
                    }
                }
            }

            &.expand.disabled {
                .thy-tree-node-check:disabled {
                    cursor: variables.$disabled-cursor;
                }
            }

            &:not(.expand).disabled {
                background: none;
                cursor: variables.$disabled-cursor;
                &.draggable {
                    .thy-tree-node-check:disabled,
                    & {
                        cursor: variables.$disabled-cursor;
                    }
                }
            }
            &.disabled {
                &,
                .thy-tree-node-icon {
                    color: variables.$gray-400;
                }
            }

            &:not(.disabled:not(.expand)) {
                &.hover,
                &:hover {
                    background-color: variables.$gray-100;
                }

                &.active {
                    background: rgba(variables.$primary, 0.1);
                    color: variables.$primary;

                    .thy-tree-node-content {
                        .thy-tree-node-icon {
                            color: variables.$primary;
                        }
                    }
                }
            }
        }
    }
}

.thy-tree {
    .thy-tree-node {
        &-edit {
            width: 100%;
            input {
                background-color: variables.$bg-default;
            }
        }

        &-actions {
            text-align: right;

            > * {
                display: none;
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }
            }
            .thy-action:last-child {
                margin-right: -10px;
            }
        }

        &-wrapper {
            &.hover,
            &:hover {
                .thy-tree-node-actions {
                    > * {
                        display: inline-block;
                    }
                }
            }
        }
    }
}

.thy-tree-sm {
    .thy-tree-node {
        &-wrapper {
            height: variables.$tree-node-wrapper-height-sm;
            .thy-tree-node-content {
                height: variables.$tree-node-wrapper-height-sm;
            }
        }
    }
}

.thy-tree-default {
    @include mixin.thy-tree-default();
}

.thy-tree.thy-virtual-scrolling-tree {
    height: 100%;
    padding: 0px;
    transform: translateY(0px);
    .cdk-virtual-scroll-viewport {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
    }
}

.thy-tree.thy-tree-draggable {
    .thy-tree-node {
        &:hover:not(.cdk-drag-disabled) {
            .thy-tree-node-wrapper {
                .thy-tree-drag-icon {
                    visibility: visible;
                }
            }
        }

        &.cdk-drag-placeholder {
            opacity: 0.4;
        }

        &.drag-item-hide {
            display: none !important;
        }

        &.drop-position-in {
            .thy-tree-node-wrapper {
                border: 2px solid variables.$primary;
            }
        }

        &.drop-position-before {
            .thy-tree-node-content {
                position: relative;
                border-top: 2px solid variables.$primary;
                border-bottom: 2px solid transparent;
                &::before {
                    content: '';
                    position: absolute;
                    left: 0px;
                    top: -5px;
                    width: 8px;
                    height: 8px;
                    background-color: variables.$bg-default;
                    border: 2px solid variables.$primary;
                    border-radius: 50%;
                }
            }
        }

        &.drop-position-after {
            .thy-tree-node-content {
                position: relative;
                position: relative;
                border-top: 2px solid transparent;
                border-bottom: 2px solid variables.$primary;
                &::before {
                    content: '';
                    position: absolute;
                    left: 0px;
                    bottom: -5px;
                    width: 8px;
                    height: 8px;
                    background-color: variables.$bg-default;
                    border: 2px solid variables.$primary;
                    border-radius: 50%;
                }
            }
        }
    }

    &.thy-tree-dragging {
        .thy-tree-node {
            .thy-tree-node-wrapper {
                &:hover {
                    background: unset;
                    .thy-tree-node-actions,
                    .thy-tree-drag-icon {
                        visibility: hidden !important;
                    }
                }
            }
        }
    }
}

.thy-tree-node.cdk-drag-preview {
    .thy-tree-node-wrapper.active {
        background: unset !important;
        color: unset !important;
        .thy-tree-node-content .thy-tree-node-icon {
            color: variables.$gray-500 !important;
        }
    }

    .thy-tree-index {
        display: none !important;
    }
    .thy-tree-node-actions {
        display: none !important;
    }
}
