import styled from "@emotion/styled";
import React from "react";
import { defineMessages, 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 messages = defineMessages({
  experienceTitle: {
    defaultMessage: "Experience",
    id: "Dashboard.experienceTitle",
  },
  location: {
    defaultMessage: "Central Bohemia, Czechia",
    id: "Dashboard.location",
  },
  skillsTitle: {
    defaultMessage: "Skills",
    id: "Dashboard.skillsTitle",
  },
});

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(messages.location)}
      </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(messages.skillsTitle)}</Headline>
      <Spacer />
      <Content>
        <Skills />
      </Content>

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

      <Headline level={2}>
        {intl.formatMessage(messages.experienceTitle)}
      </Headline>
      <Spacer />
      <Content>
        <Experience />
      </Content>
    </MainLayout>
  );
};

export default Dashboard;