import React from "react";
import { useDispatch } from "react-redux";

import { ApplicationActions } from "@com.mgmtp.a12.client/client-core/lib/core/application";

import Declaration from "./Declaration";
import Card from "./Card";

const cards = [
  {
    title: "Grundvermögen",
    imgSrc: "/images/village.jpeg",
    descriptor: { menuitem: "GrSt_Overview_HeteroModule" },
  },
  {
    title: "Land- und forstwirtschaftliches Vermögen",
    imgSrc: "/images/land.jpeg",
    descriptor: { model: "LuF_D" },
  },
  {
    title: "Kleingarten- und Dauerkleingartenland",
    imgSrc: "/images/garden.jpeg",
    descriptor: { model: "Kleingarten_D" },
  },
];

export default function WelcomePage() {
  const dispatch = useDispatch();

  return (
    <div className="-u-width-full -u-height-full -u-overflow-auto">
      <div
        className="-u-margin-x-auto -u-padding-md -u-flex -u-flex-col -u-height-full"
        style={{ maxWidth: 1280 }}
      >
        <div className="-u-width-full -u-text-left -u-text-2xl -u-margin-t-xl -u-margin-b-md">
          <p>Bitte wählen Sie das zu bewertende Vermögen aus:</p>
        </div>
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "center",
            gap: 32,
          }}
        >
          {cards.map(({ title, imgSrc, descriptor }) => (
            <div key={title} style={{ flex: "0 1 380px" }}>
              <Card
                title={title}
                imgSrc={imgSrc}
                onClick={() => {
                  dispatch(
                    ApplicationActions.startMainActivityRequested(descriptor)
                  );
                }}
              />
            </div>
          ))}
        </div>

        <Declaration />
      </div>
    </div>
  );
}