/**
 * The content tools library supports a number of dialogs for different types of
 * functionality (e.g insert an image, change a tables dimensions, etc).
 *
 * The dialog component itself sits above the page content (typically over a
 * modal.
 */

/**
 * If the dialog is performing a remote task that requires the user to wait for
 * a response from the server then it may be set to a busy state. The busy state
 * uses an animation (a rotating cog) defined below.
 */
@include keyframes(busy-dialog) {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        @include transform(transform);
    }
    100% {
        transform: translate(-50%, -50%) rotate(359deg);
        @include transform(transform);
    }
}

@mixin animation--busy-dialog() {
    @include animation(busy-dialog 5s linear);
    @include animation-iteration-count(infinite);
    @include animation-fill-mode(forwards);
}

.ct-widget {

    $dialog-width: 700px;
    $dialog-width-half: 350px;
    $dialog-height: 480px;
    $dialog-height-half: 240px;

    &.ct-dialog {
        background: white;
        box-shadow: 0 8px 8px $shadow-color;
        border-radius: 2px;
        height: $dialog-height;
        left: 50%;
        margin-left: -$dialog-width-half;
        margin-top: -$dialog-height-half;
        position: fixed;
        top: 50%;
        width: $dialog-width;
        z-index: $base-z-index + 100;

        /**
         * The `busy` modifier maybe programatically applied to a dialog to
         * prevent any further interaction with the dialog until a task has been
         * completed.
         */
        &--busy {
            .ct-dialog__busy {
                display: block;
            }
            .ct-dialog__body {
                opacity: 0.1;
            }
        }
    }

    .ct-dialog {

        /**
         * The `header`, `caption` and `close` components of the dialog make up
         * what might traditionally be thought of as a title bar for a window.
         */
        &__header {
            color: lighten($text-color, 25%);
            border-bottom: 1px solid #eee;
            height: 48px;
            padding: 0 16px;
            position: relative;
        }

        &__caption {
            @include type-text(
                $font-size: 18px,
                $line-height: 48px
                );
        }

        &__close {
            border-left: 1px solid #eee;
            cursor: pointer;
            height: 48px;
            line-height: 48px;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            @include type-icons;
            width:48px;

            &:before {
                content: '\ea0f';
            }

            &:hover {
                &:before {
                    color: $text-color;
                }
            }
        }

        /**
         * The dialog `body` is typically composed of a `view` and `controls`
         * component. The `view` component contains the dialogs content (e.g an
         * image) and the `controls` component the controls (e.g crop, rotate,
         * insert).
         */
        &__body {
            margin: auto;
            width: $dialog-width - 128px;
        }

        &__view {
            height: 320px;
            margin-top: 32px;
        }

        &__controls {
            @include clearfix;
            margin-top: 16px;
        }

        /**
         * If the dialog is in a busy state then the `busy` component is
         * displayed.
         */
        &__busy {
            display: none;
            position: absolute;

            &:before {
                @include animation--busy-dialog();
                color: lighten($text-color, 25%);
                content: "\e994";
                left: 50%;
                position: fixed;
                top: 50%;
                @include type-icons($font-size: 80px);
            }
        }
    }


    /**
     * The controls section of the dialog features icon and text buttons which
     * provide the user with controls for the contents dialog.
     */

     /**
      * Controls can be grouped left, right or centrally. Both a left and right
      * group can coexist but the central group can only be used on it's own.
      */
    .ct-control-group {
        font-size: 0;

        &--center {
            text-align: center;
        }

        &--left {
            float: left;
        }

        &--right {
            float: right;
        }
    }

    /**
     * Controls can either contain text or an icon depending on the modifier
     * set against the component (`text` or `icon` respectively).
     */
    .ct-control {
        margin-left: 16px;
        position: relative;

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

        // Icons
        &--icon {
            $icon-size: 32px;

            border-radius: 2px;
            color: lighten($text-color, 25%);
            cursor: pointer;
            display: inline-block;
            height: $icon-size;
            line-height: $icon-size;
            text-align: center;
            @include type-icons;
            @include type-tooltip(
                $parent-width: $icon-size,
                $parent-height: $icon-size
                );
            width: $icon-size;

            &:before {
                content: '';
            }

            &:hover {
                background: #eee;
                color: $text-color;
            }
        }

        // Icon modifiers

        &--active,
        &--on {
            background: lighten($text-color, 25%);
            color: white;

            &:hover {
                background: $text-color;
                color: white;
            }
        }

        &--rotate-ccw {
            &:before {
                content: '\e965';
            }
        }

        &--rotate-cw {
            &:before {
                content: '\e966';
            }
        }

        &--crop {
            &:before {
                content: '\ea57';
            }
        }

        &--remove {
            &:before {
                content: '\e9ac';
            }
        }

        &--styles {
            &:before {
                content: '\e90b';
            }
        }

        &--attributes {
            &:before {
                content: '\e994';
            }
        }

        &--code {
            &:before {
                content: '\ea80';
            }
        }

        &--icon.ct-control--muted {
            cursor: default;

            &:before {
                opacity: 0.5;
            }

            &:hover {
                color: lighten($text-color, 25%);
                background: transparent;
            }
        }

        // Text modifiers

        &--text {
            $bkg-color: #2980b9;

            background: $bkg-color;
            border-radius: 2px;
            color: white;
            cursor: pointer;
            display: inline-block;
            font-weight: bold;
            height: 32px;
            overflow: hidden;
            padding: 0 8px;
            text-align: center;
            text-overflow: ellipsis;
            @include type-text($line-height: 32px);
            vertical-align: top;
            width: 100px;

            &:hover {
                background: lighten($bkg-color, 5%);
            }
        }

        // Text modifiers

        &--apply,
        &--insert,
        &--ok {
            $bkg-color: #27ae60;
            background: $bkg-color;
            &:hover {
                background: lighten($bkg-color, 5%);
            }
        }

        &--cancel,
        &--clear {
            $bkg-color: #e74c3c;
            background: $bkg-color;
            &:hover {
                background: lighten($bkg-color, 5%);
            }
        }

        &--text.ct-control--muted {
            $bkg-color: #ccc;
            background: $bkg-color;
            cursor: default;
            &:hover {
                background: $bkg-color;
            }
        }

        &--upload {
            overflow: hidden;
        }
    }


    /**
     * The following classes relate to the various types of dialog available.
     */

    /**
     * The image dialog supports the insertion of images, the dialog has a
     * number of states to support the various steps in inserting an image.
     */
    &.ct-image-dialog {

        // States

        // No image file specified
        &--empty {

            .ct-progress-bar,
            .ct-control--rotate-ccw,
            .ct-control--rotate-cw,
            .ct-control--crop,
            .ct-control--insert,
            .ct-control--cancel,
            .ct-control--clear {
                display: none;
            }

        }

        // An image file is currently being uploaded to the server
        &--uploading {

            .ct-control--rotate-ccw,
            .ct-control--rotate-cw,
            .ct-control--crop,
            .ct-control--upload,
            .ct-control--insert,
            .ct-control--clear {
                display: none;
            }

        }

        // The dialog is displaying an image uploaded to the server ready to be
        // inserted into the page.
        &--populated {

            .ct-progress-bar,
            .ct-control--upload,
            .ct-control--cancel {
                display: none;
            }

        }

    }

    .ct-image-dialog {

        &__view {
            background: #eee;
            position: relative;

            &:empty {
                @include type-icons($font-size: 80px);
                line-height: 320px;
                text-align: center;

                &:before {
                    color: white;
                    content: '\e90d';
                }
            }
        }

        &__image {
            background-color: transparent;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
            height: 100%;
            width: 100%;
        }

        /**
         * HACK: We style the file upload button as a control, however to ensure
         * the user activates the system file browser dialog we hide the file
         * input in the control and use a large font to ensure it covers the
         * whole control.
         */
        &__file-upload {
            cursor: pointer;
            font-size: 400px;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
        }
    }


    /**
     * The properties dialog displays the attributes and styles for an element
     * in page, each property can by modified and each style turned on or off.
     */
    &.ct-properties-dialog {

        &--attributes {

            .ct-properties-dialog__attributes {
                display: block;
            }

        }

        &--styles {

            .ct-properties-dialog__styles {
                display: block;

                &:empty:before {
                    color: lighten($text-color, 25%);
                    content: attr(data-ct-empty);
                    display: block;
                    font-style: italic;
                    margin-top: 20px;
                    text-align: center;
                }
            }

        }

        &--code {

            .ct-properties-dialog__code {
                display: block;
            }

        }

    }

    .ct-properties-dialog {

        &__view {
            border: 1px solid #ddd;
            overflow: auto;
        }

        &__attributes,
        &__code,
        &__styles {
            display: none;
        }

        /**
         * The code tab supports an textarea for editing inner HTML.
         */
        &__inner-html {
            border: none;
            display: block;
            font-family: courier, $monospace;
            height: 318px;
            padding: 16px;
            outline: none;
            resize: none;
            width: 100%;

            &--invalid {
                color: $cancel-action-color;
            }
        }
    }


    /**
     * The table dialog supports the insertion and updating of tables.
     */
    .ct-table-dialog {

        &__view {
            border: 1px solid #ddd;
            overflow: auto;
        }

    }

    /**
     * The video dialog supports the insertion of embedded videos (vimeo and
     * youtube).
     */
    .ct-video-dialog {

        &__preview {

            &:empty {
                background: #eee;
                @include type-icons($font-size: 80px);
                line-height: 320px;
                text-align: center;

                &:before {
                    color: white;
                    content: '\ea98';
                }
            }

        }

        &__input {
            border: none;
            border-bottom: 1px solid #eee;
            height: 32px;
            line-height: 32px;
            outline: none;
            padding: 0 4px;
            @include type-text;
            vertical-align: top;
            width: 456px;

            &:focus {
                border-bottom: 1px solid darken(#eee, 5%);
            }
        }
    }


    /**
     * Anchored dialogs are a special type of dialog that are appear at a fixed
     * position with the page, for example above a selection of text. They are
     * used to support simple task (such as inserting a link) in a less
     * intrusive mannor than full dialogs.
     *
     * Anchored dialogs support an single text input and a confirm button only.
     */
    &.ct-anchored-dialog {
        $bkg-color: #27ae60;

        border-bottom: 2px solid $bkg-color;
        box-shadow: 0 3px 3px $shadow-color;
        font-size: 0;
        height: 34px;
        left: 0;
        margin-left: -160px;
        margin-top: -48px;
        position: absolute;
        top: 0;
        width: 320px;
        z-index: $base-z-index + 100;

        &:after {
            border: 16px solid rgba(white, 0);
            border-top-color: $bkg-color;
            content: '';
            left: 144px;
            position: absolute;
            top: 34px;
        }
    }

    .ct-anchored-dialog {
        &__input {
            border: none;
            color: $text-color;
            height: 32px;
            outline: none;
            @include type-text($line-height: 32px);
            padding: 0 8px 0 16px;
            vertical-align: top;
            width: 256px;
        }

        &__button {
            background: $confirm-action-color;
            cursor: pointer;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            @include type-icons;
            width: 32px;

            &:before {
                color: white;
                content: '\ea10';
            }

            &:hover {
                background: lighten($confirm-action-color, 5%);
            }
        }

        &__target-button {
            // On the link dialog dialog this icon appears to allow users to
            // toggle the link opening in a new window.

            // FIXME: Potentially this should be moved under a class specific to
            // a link dialog and not the anchored-dialog.
            //
            // Anthony Blackshaw <ant@getme.co.uk>, 2016-01-16

            background: white;
            cursor: pointer;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            @include type-icons;
            width: 32px;

            &:before {
                color: lighten($text-color, 25%);;
                content: '\ea7d';
            }

            &:hover:before {
                color: lighten($text-color, 30%);
            }

            &--active {
                &:before {
                    color: $confirm-action-color;
                }

                &:hover:before {
                    color: lighten($confirm-action-color, 5%);
                }
            }
        }

    }

}