/src/Template/InfoArea.elm at bca4b0ae4093288490291c920336c10f35b9511e

-- Copyright 2026 Shota FUJI
--
-- This Source Code Form is subject to the terms of the Mozilla Public
-- License, v. 2.0. If a copy of the MPL was not distributed with this
-- file, You can obtain one at https://mozilla.org/MPL/2.0/.
--
-- SPDX-License-Identifier: MPL-2.0


module Template.InfoArea exposing (infoArea)

import Html.Attributes exposing (attribute)
import Length exposing (toMM)
import Parameters exposing (Parameters, Profile(..))
import QRCode
import Svg exposing (..)
import Svg.Attributes as Attrs exposing (..)
import Svg.Path as Path exposing (..)
import Template.Layout.Container as Container exposing (aligned, columns, gapped, noGrow, padded, rows, withOutline)
import Template.Layout.Coordinate exposing (Request(..))
import Template.Layout.Item exposing (Item)
import Url exposing (Url)


infoArea : Url -> Parameters -> Item msg
infoArea url params =
    rows
        |> withOutline
            { color = "currentColor"
            , width = 0.2
            , radius = 0.3
            }
        |> Container.build
            [ columns
                |> Container.build
                    ([ rows
                        |> aligned Container.Stretch
                        |> padded 2
                        |> gapped 5
                        |> Container.build
                            [ columns
                                |> gapped 5
                                |> Container.build
                                    [ scaleChcker
                                    , legends params |> noGrow
                                    ]
                                |> noGrow
                            , columns
                                |> gapped 10
                                |> Container.build
                                    [ rows
                                        |> gapped 2
                                        |> Container.build
                                            [ parameters params
                                            , Item { width = Exactly 0, height = AtLeast 0 } (\_ _ -> g [] [])
                                            ]
                                    ]
                            , legal
                            ]
                        |> Just
                     , if params.rendering.qrCode then
                        qrCode url

                       else
                        Nothing
                     ]
                        |> List.filterMap identity
                    )
            ]


scaleChcker : Item msg
scaleChcker =
    { size = { width = Exactly 10, height = Exactly 5 }
    , element =
        \p _ ->
            let
                x : Float -> String
                x n =
                    String.fromFloat (p.x + n)

                y : Float -> String
                y n =
                    String.fromFloat (p.y + n)
            in
            g
                []
                [ g
                    [ stroke "currentColor", strokeWidth "0.2" ]
                    [ line
                        [ x1 (x 0), y1 (y 3), x2 (x 0), y2 (y 5) ]
                        []
                    , line
                        [ x1 (x 0), y1 (y 4), x2 (x 10), y2 (y 4) ]
                        []
                    , line
                        [ x1 (x 10), y1 (y 3), x2 (x 10), y2 (y 5) ]
                        []
                    ]
                , text_
                    [ Attrs.x (x 5)
                    , Attrs.y (y 0)
                    , fontSize "3"
                    , fontWeight "100"
                    , textAnchor "middle"
                    , dominantBaseline "hanging"
                    , fill "currentColor"
                    ]
                    [ text "10mm" ]
                ]
    }


label : String -> Item msg
label t =
    { size = { width = Exactly 23, height = Exactly 3 }
    , element =
        \p size ->
            text_
                [ x (String.fromFloat p.x)
                , y (String.fromFloat p.y)
                , fontSize (String.fromFloat size.height)
                , fontWeight "700"
                , textAnchor "left"
                , dominantBaseline "hanging"
                , fill "currentColor"
                ]
                [ text t, text ":" ]
    }


value : String -> Item msg
value t =
    { size = { width = Exactly 12, height = Exactly 3 }
    , element =
        \p size ->
            text_
                [ x (String.fromFloat p.x)
                , y (String.fromFloat p.y)
                , fontSize (String.fromFloat size.height)
                , fontWeight "100"
                , textAnchor "left"
                , dominantBaseline "hanging"
                , fill "currentColor"
                , attribute "text-overflow" "ellipses"
                ]
                [ text t ]
    }


lengthValue : Length.Length -> Item msg
lengthValue l =
    value (String.fromFloat (toMM l) ++ "mm")


type alias Parameter msg =
    { label : Item msg
    , value : Item msg
    }


parameter : Parameter msg -> Item msg
parameter v =
    columns
        |> gapped 1
        |> aligned Container.Center
        |> Container.build
            [ v.label, v.value ]


parametersRow : List (Item msg) -> Item msg
parametersRow children =
    columns
        |> gapped 2
        |> aligned Container.Center
        |> Container.build children


gridify : Int -> List a -> List (List a)
gridify n list =
    case List.take n list of
        [] ->
            []

        xs ->
            xs :: gridify n (List.drop n list)


parameters : Parameters -> Item msg
parameters params =
    rows
        |> gapped 1.2
        |> aligned Container.Start
        |> Container.build
            ([ [ parameter
                    { label = label "Shoulder width"
                    , value = lengthValue params.shoulderWidth
                    }
               , parameter
                    { label = label "Padding offset"
                    , value = lengthValue params.paddingOffset
                    }
               , parameter
                    { label = label "Bottom Length"
                    , value = lengthValue params.longPiece.length
                    }
               , parameter
                    { label = label "Top Length"
                    , value = lengthValue params.shortPiece.length
                    }
               ]
             , case params.profile of
                Straight ->
                    [ parameter
                        { label = label "Profile"
                        , value = value "Straight"
                        }
                    ]

                Tapered to ->
                    [ parameter
                        { label = label "Profile"
                        , value = value "Tapered"
                        }
                    , parameter
                        { label = label "Taper to"
                        , value = lengthValue to
                        }
                    ]
             , case params.longPiece.tip of
                Parameters.Round ->
                    [ parameter
                        { label = label "Tip style"
                        , value = value "Round"
                        }
                    ]

                Parameters.Pointed sharpness ->
                    [ parameter
                        { label = label "Tip style"
                        , value = value "Pointed"
                        }
                    , parameter
                        { label = label "Tip sharpness"
                        , value = value (String.fromInt sharpness)
                        }
                    ]
             , [ parameter
                    { label = label "Center hole at"
                    , value = lengthValue params.longPiece.buckleHole.distance
                    }
               , parameter
                    { label = label "Adjustments lv."
                    , value = value (String.fromInt params.longPiece.buckleHole.adjustments)
                    }
               , parameter
                    { label = label "Hole diameter"
                    , value = lengthValue params.longPiece.buckleHole.diameter
                    }
               , parameter
                    { label = label "Hole interval"
                    , value = lengthValue params.longPiece.buckleHole.interval
                    }
               ]
             , if params.shortPiece.loops.fixed == Nothing && params.shortPiece.loops.free == Nothing then
                []

               else
                [ parameter
                    { label = label "Loop style"
                    , value =
                        value
                            (case params.shortPiece.loops.style of
                                Parameters.Simple ->
                                    "Simple"

                                Parameters.Folded ->
                                    "Folded"
                            )
                    }
                ]
             , case params.shortPiece.loops.fixed of
                Just { width, length } ->
                    [ parameter
                        { label = label "Fixed loop width"
                        , value = lengthValue width
                        }
                    , parameter
                        { label = label "Fixed loop length"
                        , value = lengthValue length
                        }
                    ]

                Nothing ->
                    []
             , case params.shortPiece.loops.free of
                Just { width, length, overlap } ->
                    [ parameter
                        { label = label "Free loop width"
                        , value = lengthValue width
                        }
                    , parameter
                        { label = label "Free loop length"
                        , value = lengthValue length
                        }
                    , parameter
                        { label = label "Free loop overlap"
                        , value = lengthValue overlap
                        }
                    ]

                Nothing ->
                    []
             ]
                |> List.concat
                |> gridify
                    (if params.rendering.qrCode then
                        4

                     else
                        5
                    )
                |> List.map parametersRow
            )


legal : Item msg
legal =
    rows
        |> gapped 0.5
        |> aligned Container.End
        |> Container.build
            [ Item
                { width = Exactly 33.2, height = Exactly 2 }
                (\p size ->
                    text_
                        [ x (String.fromFloat p.x)
                        , y (String.fromFloat p.y)
                        , fontSize (String.fromFloat size.height)
                        , fontWeight "100"
                        , textAnchor "left"
                        , dominantBaseline "hanging"
                        , fill "currentColor"
                        ]
                        [ text "© Shota FUJI, licensed under CC BY 4.0" ]
                )
            , Item
                { width = Exactly 61, height = Exactly 2 }
                (\p size ->
                    text_
                        [ x (String.fromFloat p.x)
                        , y (String.fromFloat p.y)
                        , fontSize (String.fromFloat size.height)
                        , fontWeight "100"
                        , textAnchor "left"
                        , dominantBaseline "hanging"
                        , fill "currentColor"
                        ]
                        [ text "Barlow font © 2017 The Barlow Project Authors, SIL Open Font License 1.1" ]
                )
            ]


legends : Parameters -> Item msg
legends params =
    columns
        |> gapped 4
        |> aligned Container.Start
        |> Container.build
            [ columns
                |> gapped 2
                |> aligned Container.Center
                |> Container.build
                    [ Item
                        { width = Exactly 8, height = Exactly 5 }
                        (\p size ->
                            Svg.path
                                [ Path.d
                                    [ MoveTo Absolute ( p.x, p.y + size.height / 2 )
                                    , HorizontalLineTo Relative size.width
                                    ]
                                , stroke "currentColor"
                                , strokeWidth (params.rendering.lineWidth |> toMM |> String.fromFloat)
                                ]
                                []
                        )
                    , Item
                        { width = Exactly 9, height = Exactly 3 }
                        (\p size ->
                            text_
                                [ x (String.fromFloat p.x)
                                , y (String.fromFloat p.y)
                                , fontSize (String.fromFloat size.height)
                                , fontWeight "100"
                                , textAnchor "left"
                                , dominantBaseline "hanging"
                                , fill "currentColor"
                                ]
                                [ text "Cut line" ]
                        )
                    ]
            , columns
                |> gapped 2
                |> aligned Container.Center
                |> Container.build
                    [ Item
                        { width = Exactly 5, height = Exactly 5 }
                        (\p size ->
                            g
                                [ fill "none"
                                , stroke "currentColor"
                                , strokeWidth "0.1"
                                ]
                                [ Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + (size.width - size.height) / 2, p.y + size.height / 2 )
                                        , HorizontalLineTo Relative size.height
                                        ]
                                    ]
                                    []
                                , Svg.path
                                    [ Path.d
                                        [ MoveTo Absolute ( p.x + size.width / 2, p.y )
                                        , VerticalLineTo Relative size.height
                                        ]
                                    ]
                                    []
                                ]
                        )
                    , Item
                        { width = Exactly 15, height = Exactly 3 }
                        (\p size ->
                            text_
                                [ x (String.fromFloat p.x)
                                , y (String.fromFloat p.y)
                                , fontSize (String.fromFloat size.height)
                                , fontWeight "100"
                                , textAnchor "left"
                                , dominantBaseline "hanging"
                                , fill "currentColor"
                                ]
                                [ text "Hole center" ]
                        )
                    ]
            ]


qrCode : Url -> Maybe (Item msg)
qrCode url =
    QRCode.fromString (Url.toString url)
        |> Result.toMaybe
        |> Maybe.map
            (\pixels ->
                Item
                    { width = Exactly 50, height = Exactly 50 }
                    (\p size ->
                        QRCode.toSvg
                            [ width (String.fromFloat size.width)
                            , height (String.fromFloat size.height)
                            , x (String.fromFloat p.x)
                            , y (String.fromFloat p.y)
                            , stroke "currentColor"
                            ]
                            pixels
                    )
            )