import React, { useEffect, useRef, useState } from 'react';
import { DeleteEmpty, Resolve, ResolveSync } from '@devesharp/react-utils';
import { Form } from '@unform/web';
import { createBrowserHistory } from 'history';
import { Observable } from 'rxjs';
import styled from 'styled-components';
import { GetThemeVar } from '../../../support/GetThemeVar';
import { AnimationInOut } from '../../AnimationInOut';
import { Input } from '../../Input';
import { IFilterComponent } from '../PageListing.interface';
// @ts-ignore
import PropertyImage1 from './images/property1.jpg';
// @ts-ignore
import PropertyImage2 from './images/property2.jpg';
// @ts-ignore
import PropertyImage3 from './images/property3.jpg';
// @ts-ignore
import PropertyImage4 from './images/property4.jpg';
// @ts-ignore
import PropertyImage5 from './images/property5.jpg';
// @ts-ignore
import PropertyImage6 from './images/property6.jpg';
import {Datepicker} from "../../Datepicker";

export const MockPageListingStyle = styled.div`
   background: #f2f3f7;

   .container {
      padding: 20px;
      max-width: 1100px;
      margin: auto;
      display: table;
   }

   .card {
      box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
      padding: 20px;
      border: 0px;
   }

   .searching-container {
      display: flex;
      position: relative;

      .col-filters {
         width: 320px;
      }

      .col-listing {
         scroll-behavior: smooth;
         flex: 1;
         position: relative;
         overflow-y: auto;
         min-height: 0;
         display: flex;
         flex-direction: column;
         height: 100%;
         min-height: 0;
         width: 100%;
         padding-left: 20px;
      }
   }
   
   .filters {
      .filters-title {
         font-size: 20px;
         font-weight: 500;
         line-height: 20px;
         margin-bottom: 25px;

         .clear-filters {
            float: right;
            text-transform: uppercase;
            color: ${(props) => GetThemeVar(props.theme, 'primary')};
            font-size: 14px;
            font-weight: 600;
            vertical-align: middle;
            line-height: 20px;
            cursor: pointer;
         }
      }
   }

   .tag {
      color: white !important;
      background: ${(props) => GetThemeVar(props.theme, 'primary')} !important;
      &:before {
         color: white !important;
      }
   }

   .close-btn-pos {
      right: 20px !important;
      top: 20px !important;
   }

   .page-right {
      background: #f6f8fa;
   }

   .page-left {
      background: white;
      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
      overflow: auto;
      position: relative;
      z-index: 1;

      .filters {
         overflow-y: auto;
      }

      .filters-title {
         background: #f6f8fa;
         padding: 20px;
         border-bottom: 1px solid #eee;
         margin: -20px -20px 20px -20px;
      }

      .input-border {
         border-radius: 30px;
         border-width: 1px;
         padding: 0px 5px;
      }

      .filter-mobile {
         .filters-title {
            background: white;
            border: 0px;
            padding: 20px 20px;
            margin: 0px;
         }
      }
   }

   .property-card {
      display: flex;
      margin-bottom: 15px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      align-items: center;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      position: relative;

      &.skeleton:after {
         background: white;
         content: '';
         background: #e2e2e2;
         width: 100%;
         height: 100%;
         position: absolute;
      }

      &.select {
         border: 4px solid orange;
      }

      .image-row {
         height: 100%;
         margin-bottom: auto;
         align-self: flex-start;
         width: 230px;
         height: 100%;
         height: 170px;
         position: relative;

         .image {
            width: 250px;
            height: 100%;

            .cover {
               position: absolute;
               width: 100%;
               height: 100%;
               background-size: cover;
               background-position: center center;
            }
         }
      }

      .content-row {
         flex: 1;
         padding-left: 15px;

         .title {
            color: ${(props) => GetThemeVar(props.theme, 'primary')};
            font-size: 16px;
            font-weight: 700;
            position: relative;

            &::after {
               content: '';
               width: 5px;
               height: 45px;
               background: ${(props) => GetThemeVar(props.theme, 'primary')};
               display: block;
               position: absolute;
               left: -17px;
               top: 3px;
            }
         }

         .type {
            color: #999;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
         }

         .location {
            padding: 10px 0px;
            font-weight: 600;
            font-size: 13px;

            i {
               color: orange;
            }
         }

         .price {
            font-weight: 600;
            font-size: 18px;
            padding-top: 10px;
         }

         .btn-contact {
            float: right;
            background: ${(props) => GetThemeVar(props.theme, 'primary')};
            color: white;
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 14px;
            margin-right: 15px;
         }
      }

      @media (max-width: 800px) {
         flex-direction: column;
         text-align: left;
         align-items: self-start;

         .content-row {
            padding: 15px;
         }

         .image-row {
            width: 100%;
         }
      }
   }

   .calendar {
      padding: 30px;

      .week {
         width: 100%;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;

         .day {
            min-width: 0;
            min-height: 90px;
            border-right: 1px solid #e1e2ea;
            border-bottom: 1px solid #e1e2ea;
            background-color: white;
            padding: 10px;
            flex-grow: 1;
            flex-basis: 0;
            min-width: 0;
            min-height: 90px;

            &.special {
               color: white;
               background: ${(props) => GetThemeVar(props.theme, 'primary')};
            }
         }
      }

      &.skeleton {
         .week {
            .day {
               .day-number {
                  background: #ddd;
                  color: #ddd;
               }
            }
         }
      }
   }
`;

export const Filters: IFilterComponent<any> = ({ handleFilters, filters }): any => {
   const formRef = useRef(null);
   const [initialData, setInitialData] = useState(configureForm(filters));

   function configureForm(_filters: any): any {
      const filtersAux = { ..._filters };
      return filtersAux;
   }

   useEffect(() => {
      formRef.current.reset();
      formRef.current.setData(configureForm(filters));
   }, [filters]);

   const forceSubmit = (filter?: string): any => {
      formRef.current.submitForm();
   };

   function onSubmit(_filters: any): void {
      const filtersAux = { ..._filters };

      handleFilters(DeleteEmpty(filtersAux));
   }

   return (
      <div>
         <Form onSubmit={onSubmit} ref={formRef} initialData={initialData}>
            <Input name="name" title="Nome" onBlur={forceSubmit} onEnter={forceSubmit} />
            <br />
            <Input name="location" title="Localização" onBlur={forceSubmit} onEnter={forceSubmit} />
            <br />
            <Input name="address" title="Endereço" onBlur={forceSubmit} onEnter={forceSubmit} />
            <br />
            <Input name="price" title="Preço" onBlur={forceSubmit} onEnter={forceSubmit} />
            <br />
            <Datepicker name="date" title="Preço" onValueChange={() => forceSubmit()} />
         </Form>
      </div>
   );
};

export const Card = ({ skeleton = false, selected = false, onSelect, resource = {} }: any): any => {
   return (
      <AnimationInOut>
         <div className={`property-card ${skeleton && 'skeleton'} ${selected && 'select'}`}>
            <div className="image-row">
               <div className="image">
                  <div className="cover" style={{ backgroundImage: `url(${resource.image})` }} />
               </div>
            </div>
            <div className="content-row">
               {onSelect && (
                  <div className="btn btn-primary" onClick={() => onSelect(resource)} data-testid="select-card">
                     Select Card
                  </div>
               )}

               <div className="title">COD: {resource.id} - The Rose Hill District</div>
               <div className="type">Apartment</div>

               <div className="location">
                  <i className="fas fa-map-marker-alt" /> JL. Amarto, Seturan, Caturtunggal
               </div>

               <div className="price">
                  <div className="btn-contact">Contact</div>
                  R$ 521.000
               </div>
            </div>
         </div>
      </AnimationInOut>
   );
};

export const resolveError: Resolve<any> = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.error({});
         subscriber.complete();
         subscriber.unsubscribe();
      }, 800);
   });

export const resolveNotFound: Resolve<any> = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.next({
            results: [],
            count: 0,
         });
         subscriber.complete();
         subscriber.unsubscribe();
      }, 800);
   });

export const ResolveItems = (params: any) =>
   new Observable((subscriber) => {
      setTimeout(() => {
         subscriber.next({
            results: [
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 1,
                  image: PropertyImage1,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 2,
                  image: PropertyImage2,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 3,
                  image: PropertyImage3,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 4,
                  image: PropertyImage4,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 5,
                  image: PropertyImage5,
               },
               {
                  id: parseInt((params?.offset || 0) as any, 10) + 6,
                  image: PropertyImage6,
               },
            ],
            count: 30,
         });
         subscriber.complete();
         subscriber.unsubscribe();
      }, 1500);
   });
export const history = createBrowserHistory();
