<script lang="ts">
    import { germanyStates } from "../../../../config"
    import Input from "../blocks/form/Input.svelte"
    import Select from "../blocks/form/Select.svelte"
    import { onChange } from "./helper"

    export let address: BigCommerceAddress
    const stateOptions = germanyStates.map((state) => ({
        label: state.name,
        value: state.name,
    }))
</script>

<div class="row">
    <Input
        onChange="{onChange}"
        bind:value="{address.first_name}"
        placeholder="Vorname*"
        id="firstName"
    />
    <Input
        onChange="{onChange}"
        bind:value="{address.last_name}"
        placeholder="Nachname*"
        id="lastName"
    />
</div>
<div class="row">
    <Input
        onChange="{onChange}"
        bind:value="{address.address1}"
        placeholder="Straße*"
        id="address1"
    />
</div>
<div class="row">
    <Input
        onChange="{onChange}"
        bind:value="{address.address2}"
        placeholder="Zusatz"
        id="address2"
    />
</div>

<div class="row">
    <Input
        onChange="{onChange}"
        bind:value="{address.postal_code}"
        placeholder="PLZ*"
        id="postalCode"
    />
    <Input
        onChange="{onChange}"
        bind:value="{address.city}"
        placeholder="Stadt*"
        id="city"
    />
</div>

<div class="row">
    <Select
        bind:value="{address.state_or_province}"
        options="{stateOptions}"
        placeholder="Bundesland*"
        selectedOption="{stateOptions[0]}"
    />
    <Select
        bind:value="{address.country_code}"
        options="{[{ label: 'Deutschland', value: 'DE' }]}"
        selectedOption="{{ label: 'Deutschland', value: 'DE' }}"
        placeholder="Land*"
    />
</div>
<div class="row">
    <Input
        onChange="{onChange}"
        bind:value="{address.phone}"
        placeholder="Telefonnummer"
        id="phone"
    />
</div>

<style lang="less">
    @import "../../../assets/css/variables.less";
    .row {
        display: flex;
        align-items: flex-end;
        gap: 1.2rem;
        @media @mobile {
            flex-direction: column;
        }
    }
</style>
