/*
 *
 * HomePage
 *
 */
/* eslint-disable */
import React, { memo, useMemo, useState, useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { get, upperFirst } from 'lodash';
import { auth, LoadingIndicatorPage, useQuery  } from 'strapi-helper-plugin';
import PageTitle from '../../components/PageTitle';
import { useModels } from '../../hooks';
import './style.css'
import {URL_FRONTEND_PLUGIN} from '../../config'

import useFetch from './hooks';
import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
import BlogPost from './BlogPost';
import SocialLink from './SocialLink';
import { Button } from 'semantic-ui-react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch, faPlusCircle, faUser } from '@fortawesome/free-solid-svg-icons'
import MessageExamplePositive from './message/index'

const FIRST_BLOCK_LINKS = [
  {
    link:URL_FRONTEND_PLUGIN,
    contentId: 'Advanced Search',
    icon: faSearch,
    style: { width: "165px", backgroundColor: "rgb(72, 114, 150)", fontSize: "13px", color: "white", fontWeight: "700" },
    clickEvent: () => {
      localStorage.setItem('showEdit', 'false')
      window.location = URL_FRONTEND_PLUGIN
    }
  },
  {
    link: URL_FRONTEND_PLUGIN,
    contentId: 'Add/Edit Config',
    icon: faPlusCircle,
    style: { width: "165px", backgroundColor: "rgb(29 171 40)", fontSize: "13px", color: "white", fontWeight: "700" },
    clickEvent: () => {
      localStorage.setItem('showEdit', 'true')
      window.location = URL_FRONTEND_PLUGIN
    }
  },
  {
    link: URL_FRONTEND_PLUGIN,
    contentId: 'User Management',
    icon: faUser,
    style: { width: "165px", backgroundColor: "rgb(61 70 75)", fontSize: "13px", color: "white", fontWeight: "700" },
    clickEvent: () => {
    }
  },
];

const HomePage = ({ history: { push } }) => {
  const { error, isLoading, posts } = useFetch();
  // Temporary until we develop the menu API
  const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
  const [showMessage, toggleMsg] = useState(false);
  const query = useQuery();
  let page = query.get('page');
  useEffect(() => {
    if(page=='advanced_search') {
      FIRST_BLOCK_LINKS[0].clickEvent();
    } 
    else if(page == 'add_edit') {
      FIRST_BLOCK_LINKS[1].clickEvent();
    }
  })


  const handleClick = e => {
    e.preventDefault();

    push(
      '/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
    );
  };

  const hasAlreadyCreatedContentTypes = useMemo(() => {
    const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);

    return (
      filterContentTypes(collectionTypes).length > 1 || filterContentTypes(singleTypes).length > 0
    );
  }, [collectionTypes, singleTypes]);

  if (isLoadingForModels) {
    return <LoadingIndicatorPage />;
  }

  const headerId = hasAlreadyCreatedContentTypes
    ? 'HomePage.greetings'
    : 'app.components.HomePage.welcome';
  const username = get(auth.getUserInfo(), 'firstname', '');
  const linkProps = hasAlreadyCreatedContentTypes
    ? {
        id: 'app.components.HomePage.button.blog',
        href: 'https://strapi.io/blog/',
        onClick: () => {},
        type: 'blog',
        target: '_blank',
      }
    : {
        id: 'app.components.HomePage.create',
        href: '',
        onClick: handleClick,
        type: 'documentation',
      };

  return (
    <>
      <FormattedMessage id="HomePage.helmet.title">
        {title => <PageTitle title={"advanced Search"} />}
      </FormattedMessage>
      <Container className="container-fluid">  
        <div className="row">
          <div className="col-lg-12 col-md-12">
            {showMessage ? <div className = "alert-div"><MessageExamplePositive msg = {"this feature is coming soon"} /></div>: <></>}
            <Block>
              <Wave />
              <FormattedMessage
                id={headerId}
                values={{
                  name: upperFirst(username),
                }}
              >
                {msg => <h2 id="mainHeader">Welcome to KB Bot!</h2>}
              </FormattedMessage>
              <span style = {{textAlign: "justify"}}>
                <FormattedMessage style = {{textAlign: "center"}} id="aboutus">
                  {msg => <P>{msg}</P>}
                </FormattedMessage>
                </span>
              <span style = {{textAlign: "justify"}}>
                <FormattedMessage style = {{textAlign: "center"}} id="aim">
                  {msg => <P>{msg}</P>}
                </FormattedMessage>
              </span>
                <h2>How it works-</h2>
              <span style = {{textAlign: "justify"}}>
                <FormattedMessage style = {{textAlign: "center"}} id="working">
                  {msg => <P>{msg}</P>}
                </FormattedMessage>
              </span>
                
                
              

              <Separator style={{ marginTop: 37, marginBottom: 36 }} />
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                {FIRST_BLOCK_LINKS.map((data, index) => {
                  const type = index === 0 ? 'doc' : 'code';

                  return (
                  <>
                    { data.contentId=='User Management' ? 
                    (
                      <div style={{ display: 'inline-block', margin: "10px" }}>
                        <Button style={data.style} type="submit" onClick={() => {toggleMsg(1);setTimeout(() => toggleMsg(0), 2000)}}>
                          <FontAwesomeIcon style={{ marginRight: "3px" }} icon={data.icon} />
                            {data.contentId}
                          </Button>
                      </div>
                    ) :(
                      <div style={{ display: 'inline-block', margin: "10px" }}>
                        <Button style={data.style} type="submit" onClick={() => {data.clickEvent()}}>
                          <FontAwesomeIcon style={{ marginRight: "3px" }} icon={data.icon} />
                           {data.contentId}
                          </Button>
                      </div>)
                    }
                  </>
                  );
                })}
              </div>
            </Block>
          </div>

          {/* <div className="col-md-12 col-lg-4">
            <Block style={{ paddingRight: 30, paddingBottom: 0 }}>
              <FormattedMessage id="HomePage.community">{msg => <h2>{msg}</h2>}</FormattedMessage>
              <FormattedMessage id="app.components.HomePage.community.content">
                {content => <P style={{ marginTop: 7, marginBottom: 0 }}>{content}</P>}
              </FormattedMessage>
              <FormattedMessage id="HomePage.roadmap">
                {msg => (
                  <ALink
                    rel="noopener noreferrer"
                    href="https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration"
                    target="_blank"
                  >
                    {msg}
                  </ALink>
                )}
              </FormattedMessage>

              <Separator style={{ marginTop: 18 }} />
              <div
                className="row social-wrapper"
                style={{
                  display: 'flex',
                  margin: 0,
                  marginTop: 36,
                  marginLeft: -15,
                }}
              >
                {SOCIAL_LINKS.map((value, key) => (
                  <SocialLink key={key} {...value} />
                ))}
              </div>
            </Block>
          </div> */}
        </div>
      </Container>
    </>
  );
};

export default memo(HomePage);
