////@import "../../../abstracts/abstracts";

// Dynabloqs Material Design image file upload
.modal-content,
.dbq-form {
    .dbqmd-form-group {
        .dbqmd-label {
            &:has(.dbq-image-file-upload) {
                background: $material-design-default-background-color;
                border-radius: $material-design-border-radius;

                .dbqmd-title-label {
                    width: unset; // Removed important
                    padding-right: 5px;
                    display: flex !important;   // Needed to overrule styling from material design base file
                    flex-direction: row;
                    align-items: center;

                    .dbqmd-icon.dbqmd-icon-info-tooltip {
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        margin-left: 5px;

                        svg {
                            padding: 0;
                            margin: 0;
                            fill: $material-design-icon-tooltip-color;
                        }
                    }
                }
            }
            
            &:has(.dbq-image-file-upload):has(.dbqmd-end-icon):not(:has(.dbq-has-image-preview)) {
                .dbqmd-title-label {
                    width: calc(100% - $material-design-end-icon-total-padding);
                }
            }
            
            &:has(.dbq-image-file-upload):has(.dbqmd-end-icon) {
                .dbqmd-title-label {
                    width: calc(100% - 110px - $material-design-end-icon-total-padding);
                }
            }

            &:has(.dbq-image-file-upload):has(.image-file-upload-input) {
                .dbqmd-title-label {
                    width: calc(100% - 30px - $material-design-end-icon-total-padding);
                }
            }

            .dbq-image-file-upload {
                width: 100%;

                &.dbq-has-image-preview {
                    .image-preview {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        margin: $global-margin;
                        margin-top: 30px;
                        background: $material-design-default-background-color !important;
                        border-radius: $material-design-border-radius-single;
                        border: 0 !important;
                        cursor: pointer;

                        // Resizable image preview
                        resize: vertical;
                        overflow: auto;
                        min-height: 100px;
                        max-height: 1200px;

                        &:hover {
                            border: 0 !important;
                            background: $material-design-hover-background-color !important;
                        }
                    }

                    // Editable image file upload (default height 168px for the preview image)
                    &:not([data-is-read-only="true"]) {
                        .image-preview {
                            height: 168px;
                        }

                        .image-preview img.dbqdb-image {
                            margin: 0;
                            width: auto;    
                            height: 100%;   
                            max-height: unset;
                            object-fit: contain; // Keep aspect ratio
                        }
                    }

                    // Read-only image file upload (use height as needed for the preview image)
                    &[data-is-read-only="true"][data-has-value="true"] {
                        .image-preview {
                            height: auto;
                        }

                        .image-preview img.dbqdb-image {
                            margin: 0;
                            width: 100%;  
                            height: auto;
                            max-height: 100%;
                            object-fit: contain;
                        }
                    }

                    &:hover {
                        .image-preview {
                            & > svg {
                                opacity: 0.5;
                            }
                        }
                    }

                    .image-file-upload-filename {
                        padding-top: 0px;
                        padding: $global-padding;
                    }
                }

                // Read only
                &[data-is-read-only="true"][data-has-value="true"] {
                    background: $material-design-disabled-background-color !important;
                    border: 0 !important;
                    border-bottom: 1px solid $material-design-disabled-border-color !important;
                    cursor: not-allowed;
                }

                // Disabled and empty image file upload
                &[data-is-read-only="true"][data-has-value="false"] {
                    display: none;
                }
            }
            
            .image-file-upload {
                border-radius: 0;
                background: $material-design-default-background-color !important;
                //border-radius: $material-design-border-radius;
                color: $material-design-default-label-color;
                width: $material-design-width;
                height: $material-design-height;
                border: 0;
                padding: 0;
                border-bottom: 1px solid $material-design-default-border-color;
                display: flex;
                overflow: hidden;
                align-items: center;

                .image-file-upload-filename {
                    height: initial !important;
                    color: $text-color-default;
                    width: 0 !important;
                    position: initial;
                    flex-grow: 1; // Takes up all the remaining space
                    min-width: 0; // Prevents it from exceeding its necessary width
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding: 0 $global-padding;
                    padding-top: $global-padding;
                }

                .input-group-btn {
                    position: initial;
                    width: initial !important;
                    height: 100% !important;
                    display: flex;
                    flex-shrink: 0;
                    flex-grow: 0;
                    margin-left: auto;
                    align-items: center;
                    background: none;

                    span {
                        display: none; // Temp
                    }

                    .btn.btn-default {
                        display: flex;
                        position: relative;
                        align-items: center;
                        height: 100%;
                        border: 0 !important;
                        padding: 0px;
                        padding-left: $material-design-icon-padding;
                        padding-right: $material-design-icon-padding;
                        background: none;

                        .image-file-upload-input-title {
                            color: $material-design-focus-text-color;
                        }

                        svg {
                            fill: $material-design-focus-text-color;
                            margin: 0;
                        }

                        &:hover {
                            background: $material-design-hover-background-color !important;
                            
                            .image-file-upload-input-title {
                                color: $color-primary !important;
                            }

                            svg {
                                fill: $color-primary !important;
                            }
                        }

                        &.image-file-upload-clear {
                            .image-file-upload-input-title {
                                color: #d5473c; // To-do: add color as variable
                            }
        
                            svg {
                                fill: #d5473c;
                            }

                            &:hover {
                                .image-file-upload-input-title {
                                    color: #d5473c !important;
                                }
        
                                svg {
                                    fill: #d5473c !important;
                                }
                            }
                        }

                        .dbqdb-binary-file-upload.dbqdb-image-upload-input {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            &:has([data-is-read-only="true"][data-has-value="false"] ) {
                .dbqdb-no-image-row {
                    margin: 0;

                    .dbq-no-image-found-text {
                        background: $material-design-disabled-background-color !important;
                        border-radius: $material-design-border-radius;
                        border: 0;
                        border-bottom: 1px solid $material-design-read-only-border-color;
                        color: $material-design-disabled-text-color;
                        width: $material-design-width;
                        height: $material-design-height;
                        line-height: calc($material-design-height - $global-padding);
                        padding: 0 $global-padding;
                        padding-top: $global-padding;
                    }
                }
            }

            // Hover
            &.dbqmd-hover {
                &:not(:disabled) {
                    .input-group.image-file-upload {
                        background: $material-design-hover-background-color;
                    }
                }
        
                &:disabled {
                    .input-group.image-file-upload {
                        cursor: not-allowed;
                    }
                }
            }
        }

        // Styling end icon
        &:has(.dbqmd-has-end-icon) {
            .dbq-image-file-upload {
                &.dbq-has-image-preview {
                    .dbqdb-image-preview {
                        margin-right: $material-design-end-icon-total-padding;
                    }
                }
            }

            &:has(.dbq-image-file-upload:not([data-is-read-only="true"]).dbq-has-image-preview) {
                // Only apply repositioning if the field is not read-only  
                .dbqmd-icon.dbqmd-end-icon {
                    margin-top: -$material-design-height; // Position the icon in the middle of the preview container
                }
            }

            &:not(:has(.dbq-has-image-preview)) {
                .input-group.image-file-upload {
                    padding-right: $material-design-end-icon-total-padding;
                }

                .image-file-upload-filename {
                    padding-top: $global-padding;
                }
            }
        }
    }
}