import styled from "@emotion/styled";
import React from "react";
import { useIntl } from "react-intl";

import { Experience, Skills, Summary } from "../components/CV";
import MainLayout from "../components/Layout/MainLayout";
import { hideNavigationMQ } from "../components/Layout/navigationBreakpoint";
import { Contact } from "../components/common/Contact";
import { Content } from "../components/common/Content";
import { Headline, SubHeadline } from "../components/common/Headline";
import { Spacer } from "../components/common/Spacer";
import { CONTACT_EMAIL, CONTACT_PHONE, POSITION } from "../config/environment";

const HiddenWithNav = styled("div")({
  display: "none",
  [hideNavigationMQ]: {
    display: "block",
  },
});

const Dashboard: React.FC = () => {
  const intl = useIntl();

  return (
    <MainLayout>
      <Headline level={1}>Lukáš Čech</Headline>
      <SubHeadline level={2}>{POSITION}</SubHeadline>
      <SubHeadline level={4}>
        {intl.formatMessage({
          defaultMessage: "Central Bohemia, Czechia",
          id: "Lkk994",
        })}
      </SubHeadline>

      <HiddenWithNav>
        <Contact email={CONTACT_EMAIL} phoneNumber={CONTACT_PHONE} />
      </HiddenWithNav>

      <div id="objective" />
      <Spacer withDivider />

      <Content>
        <Summary />
      </Content>

      <div id="skills" />
      <Spacer withDivider />

      <Headline level={2}>
        {intl.formatMessage({
          defaultMessage: "Skills",
          id: "4JISx9",
        })}
      </Headline>
      <Spacer />
      <Content>
        <Skills />
      </Content>

      <div id="experience" />
      <Spacer withDivider />

      <Headline level={2}>
        {intl.formatMessage({
          defaultMessage: "Experience",
          id: "W1qv5r",
        })}
      </Headline>
      <Spacer />
      <Content>
        <Experience />
      </Content>
    </MainLayout>
  );
};

export default Dashboard;