import React from 'react';
import styled from 'styled-components';
import { Box, Text } from 'rebass';
import { Grid, List, Image, Divider } from 'semantic-ui-react';
import { shuffle } from 'lodash';
import SearchForm from 'App/shared/components/SearchForm';
import Link from 'App/shared/components/Link';
import { onSearch } from './Search/Utils';
import VespaIcon from 'App/shared/img/VespaIcon.png';
import Footer from 'App/shared/components/Footer';

// Logos used in "featured in" section
import CWLogo from 'App/shared/img/logos/computerworld-logo.png';
import SMDLogo from 'App/shared/img/logos/search-marketing-daily.png';
import ZDNetLogo from 'App/shared/img/logos/zdnet-logo-large.png';
import DatanamiLogo from 'App/shared/img/logos/datanami-logo-2018.png';
import WSJLogo from 'App/shared/img/logos/wsj-logo-alt.svg';

const featuredArticles = [
  {
    logo: CWLogo,
    name: 'ComputerWorld',
    link: 'https://www.computerworld.com/article/3534478/tech-pitches-in-to-fight-covid-19-pandemic.html'
  },
  {
    logo: SMDLogo,
    name: 'SearchMarketing Daily',
    link: 'https://www.mediapost.com/publications/article/349673/verizon-media-launches-covid-19-search-engine-for.html'
  },
  {
    logo: ZDNetLogo,
    name: 'ZDNet',
    link: 'https://www.zdnet.com/article/verizon-introduces-open-source-big-data-coronavirus-search-engine/'
  },
  {
    logo: DatanamiLogo,
    name: 'Datanami',
    link: 'https://www.datanami.com/2020/04/10/yahoos-vespa-takes-a-whack-at-cord-19-data/'
  },
  {
    logo: WSJLogo,
    name: 'Wall Street Journal',
    link: 'https://www.wsj.com/articles/machine-learning-experts-delve-into-47-000-papers-on-coronavirus-family-11586338201'
  }
];

const sampleQueries = [
  'What is the impact of school closure in handling the COVID-19 pandemic?',
  '+CT screening COVID-19 +("Machine Learning" AI "Aritifical Intelligence")',
  'Has social distancing had an impact on slowing the spread of COVID-19?',
  'What are the best masks for preventing infection by COVID-19?',
  'What kinds of complications related to COVID-19 are associated with hypertension?',
  'Is +(remdesivir hydroxychloroquine) an effective treatment for COVID-19?',
  '+"diamond princess" cruise +COVID-19',
  'Estimate +COVID-19 +("case fatality rate" cfr ifr "infection fatality rate")',
  '+(title:masks title:respirator title:n95) +covid-19',
];

const TallDivider = styled(Divider)`
  padding-top: 100px;
`;

const Content = styled(Box)`
  background-image: linear-gradient(0deg, #98c1db 7%, #005a8e 100%);
  min-height: calc(100vh - 66px);
`;

const ContentGrid = styled(Grid)`
  &&& {
    min-height: calc(100vh - 130px);
    color: white;
    font-size: 1.1rem;
    margin-top: 0;

    .column {
      padding: 0;
    }

    h1 {
      font-size: 3.5rem;
      font-weight: 300;
    }

    h4 {
      font-size: 1.1rem;
      margin: 3rem 0 0;
    }

    & .ui.list {
      margin: 0.5rem 0;
    }

    .ui.form {
      max-width: 800px;
      padding: 0 2rem;
    }

    a {
      color: #b3e5fc !important;
      font-weight: 600;
      font-weight: normal;
    }

    a:hover {
      color: #ffc43c !important;
    }
  }
`;

function SearchSuggestions() {
  return (
    <>
      <h4>Try searching for...</h4>
      <List>
        {shuffle(sampleQueries)
          .slice(0, 3)
          .map((query, i) => (
            <List.Item key={i}>
              <Link to={'/search?query=' + encodeURIComponent(query)}>
                {query}
              </Link>
            </List.Item>
          ))}
      </List>
    </>
  );
}

function VespaDescription() {
  return (
    <Box my={4}>
      <Image src={VespaIcon} size="tiny" centered />
      <Text mt={3}>
        This is an{' '}
        <Link to="https://github.com/vespa-engine/cord-19/blob/master/README.md">
          open source application{' '}
        </Link>
        on <Link to="https://vespa.ai">Vespa.ai</Link>
      </Text>
      <Text mt={1}>The big data serving engine.</Text>
    </Box>
  );
}

function FeaturedInSection() {
  return (
    <>
      <TallDivider hidden />
      <Text>In the news:</Text>
      <List horizontal>
        {featuredArticles.map((article, i) => (
          <List.Item key={i}>
            <Link to={article.link}>
              <Image src={article.logo} alt={article.name} size="tiny" centered verticalAlign='middle' />
            </Link>
          </List.Item>
        ))}
      </List>
    </>
  )
}

function Main() {
  return (
    <Content width={1}>
      <ContentGrid verticalAlign="middle" textAlign="center">
        <Grid.Column>
          <h1 size="huge">CORD-19 Search</h1>
          <SearchForm onSearch={onSearch} />
          <SearchSuggestions />
          <VespaDescription />
          <FeaturedInSection />
        </Grid.Column>
      </ContentGrid>
      <Footer page="main" />
    </Content>
  );
}

export default Main;