module ElementAdjustment exposing (..)

import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Html exposing (Html)


main : Html msg
main =
    layout [ width fill, height fill ] <|
        column
            [ width <| maximum 600 fill
            , centerX
            , centerY
            , padding 20
            , spacing 80
            , Font.size 14
            ]
            [ clock
            , column [ width fill ]
                [ el [ width fill, height <| px 30, Background.color color.blue ] none
                , el
                    [ rotate -0.2
                    , width fill
                    , height <| px 30
                    , Background.color color.blue
                    ]
                  <|
                    text "rotate -0.2"
                , el [ width fill, height <| px 30, Background.color color.blue ] none
                ]
            , column [ scale 0.5, width fill ]
                [ el [ width fill, height <| px 30, Background.color color.blue ] none
                , el
                    [ rotate -0.2
                    , width fill
                    , height <| px 30
                    , Background.color color.blue
                    ]
                  <|
                    text "rotate -0.2"
                , el [ width fill, height <| px 30, Background.color color.blue ] none
                ]
            , column [ width fill ]
                [ el [ width fill, height <| px 30, Background.color color.blue ] none
                , el
                    [ moveLeft 10
                    , moveUp 20
                    , width fill
                    , height <| px 30
                    , Background.color color.blue
                    ]
                  <|
                    text "moveLeft 10, moveUp 20"
                , el [ width fill, height <| px 30, Background.color color.blue ] <| none
                ]
            , shiftedElements
            ]


clock : Element msg
clock =
    let
        hands =
            [ inFront <|
                el
                    [ moveRight 15
                    , moveUp 16
                    , rotate (pi / 8)
                    , width <| px 4
                    , height <| px 30
                    , Background.color color.blue
                    ]
                    none
            , inFront <|
                el
                    [ moveLeft 6
                    , rotate (pi / 3)
                    , width <| px 4
                    , height <| px 40
                    , Background.color color.blue
                    ]
                    none
            ]

        hours =
            List.range 1 12
                |> List.map
                    (\i ->
                        let
                            angle =
                                toFloat i * 2 * pi / 12
                        in
                        inFront <|
                            el
                                [ width <| px 28
                                , height <| px 28
                                , moveUp <| 60 * cos angle
                                , moveRight <| 60 * sin angle
                                , rotate angle
                                , Background.color <| rgba255 (20 + i * 15) (i * 15) 200 0.5
                                , Border.rounded 10
                                ]
                            <|
                                el [ centerX, centerY ] <|
                                    text <|
                                        String.fromInt i
                    )
    in
    row ([ scale 1.5, moveLeft 14, height <| px 100, centerX ] ++ hours ++ hands) []


shiftedElements : Element msg
shiftedElements =
    row
        [ width <| px 300
        , height <| px 50
        , centerX
        , Background.color <| rgb255 0xC0 0xC0 0xC0
        ]
        [ el
            [ moveLeft 25
            , width <| px 50
            , height <| px 50
            , Background.color color.blue
            ]
          <|
            text "Left"
        , el
            [ moveUp 25
            , width <| px 50
            , height <| px 50
            , centerX
            , Background.color color.blue
            ]
          <|
            text "Up"
        , el
            [ moveDown 25
            , width <| px 50
            , height <| px 50
            , centerX
            , Background.color color.blue
            ]
          <|
            text "Down"
        , el
            [ moveRight 25
            , width <| px 50
            , height <| px 50
            , alignRight
            , Background.color color.blue
            ]
          <|
            text "Right"
        ]


color =
    { blue = rgba255 0x72 0x9F 0xCF 0.4
    , darkCharcoal = rgb255 0x2E 0x34 0x36
    , lightBlue = rgb255 0xC5 0xE8 0xF7
    , lightGrey = rgb255 0xE0 0xE0 0xE0
    , white = rgb255 0xFF 0xFF 0xFF
    }