import React, { useState } from 'react';
import InputField from './components/FormElements/Input/InputField';
import Select from '../src/components/FormElements/Select/select';
import Radio from '../src/components/FormElements/Radio/Radio';
import DatePicker from '../src/components/FormElements/DatePicker/DatePicker';
import FileUploader from '../src/components/FormElements/File/File';
import Password from '../src/components/FormElements/Password/Password';
import Tooltip from '../src/components/Ui/tooltip/Tooltip';
import Alert from '../src/components/Ui/alert/Alert';
import Avatars from '../src/components/Ui/avatars/Avatars';
import Accordion from '../src/components/Ui/accordion/Accordion';
import BackButton from '../src/components/Ui/backButton/BackButton';
import ScrollTop from '../src/components/Ui/scrollTop/ScrollTop';
import Breadcrumb from '../src/components/Ui/breadcrumb/Breadcrumb';
import Card from '../src/components/Ui/Card/Card';
import ImageRadio from '../src/components/Ui/ImageRadio/ImageRadio';
import DropDown from './components/Ui/dropDown/DropDown';
import Button from './components/Ui/button/Button';
import Modal from '../src/components/Ui/modal/Modal';
import Tag from '../src/components/Ui/tag/Tag';
import Spinner from '../src/components/Ui/spinner/Spinner';
import Pagination from '../src/components/Ui/pagination/Pagination'
import Tabs from '../src/components/Ui/tabs/Tabs';
// import PasswordField from './components/FormElements/PasswordField';

import CardImage from '../src/assets/images/thumb3.jpg';




type FormProps = {
  firstName: string,
  password: string,
}

type ItemProps = {
  title: string,
  icon?: string,
  content: string,
}


const items:ItemProps[] = [
  {
    title: "Cycads",
    content: "Cycads have a cylindrical trunk which usually does not branch. Leaves grow directly from the trunk, and typically fall when older, leaving a crown of leaves at the top. The leaves grow in a rosette form, with new foliage emerging from the top and center of the crown. The trunk may be buried, so the leaves appear to be emerging from the ground, so the plant appears to be a basal rosette. The leaves are generally large in proportion to the trunk size, and sometimes even larger than the trunk."
  },
  {
    title: "Gingko",
    content: "Ginkgo biloba, commonly known as ginkgo or gingko also known as the maidenhair tree, is a species of tree native to China. It is the last living species in the order Ginkgoales, which first appeared over 290 million years ago. Fossils very similar to the living species, belonging to the genus Ginkgo, extend back to the Middle Jurassic approximately 170 million years ago. The tree was cultivated early in human history and remains commonly planted."
  },
  {
    title: "Conifers",
    content: "Conifers are a group of cone-bearing seed plants, a subset of gymnosperms. Scientifically, they make up the division Pinophyta, also known as Coniferophyta or Coniferae. The division contains a single extant class, Pinopsida. All extant conifers are perennial woody plants with secondary growth. The great majority are trees, though a few are shrubs."
  }
]


function App() {
  const [state, setstate] = useState<FormProps>({
    firstName: 'sivaguru',
    password: ''
  });

  const [dob, setDob] = useState<Date>()
  const [gender, setGender] = useState('male')
  const [imageRadio, setImageRadio] = useState('visa');
  const [selectedFile, setSelectedFile] = useState()
  const [showModal, setShowModal] = useState(false);

  // current page
  const [currentPage, setCurrentPage] = useState(1);

  // total records per page to display
  const recordPerPage = 10;

  // total number of the records
  const totalRecords = 850;

  // range of pages in paginator
  const pageRange = 5;

  // handle page change event
  const handlePageChange = (pageNumber:number) => {
    setCurrentPage(pageNumber);
    // call API to get data based on pageNumber
  }

  

  const handleChange = (event: any) => {
    const {name, value} = event.target;
    setstate({...state, [name]: value});
  };

  const dateChange = (date:Date) => {
    console.log(date)
    setDob(date)
  }

  const genderChange = (event:any) => {
    setGender(event.target.value)
  }

  const imageRadioChange = (event:any) => {
    console.log(event.target.value)
    setImageRadio(event.target.value)
  }

  const FileChange = (file:any) => {
    setSelectedFile(file)
  }

  // This function will scroll the window to the top
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // for smoothly scrolling
    });
  };

  // Button onClick Functions
  const handleClick = () => {
    
  };

  // Modal open functions
  const handleClickModal = () => {
    setShowModal(true)
  };

  // MOdal close functions
  const hideModal = () => {
    setShowModal(false)
  }

  return (
    <div className='page'>
      <div className='container'>
        <div className="form-box">

          {/* Header */}
          <div className="header">
            <h2>Form elements</h2>
          </div>

          {/* Form elements */}
          <div className="form-area">
              {/* First Name */}
              <InputField name="firstName" id="firstName" value={state.firstName}  type='text' label='First Name' handleChange={handleChange}/>
          </div>

          {/* Password elements */}
          <div className="form-area">
              {/* Password */}
              <Password name="password" id="password" value={state.password}  label='Password' handleChange={handleChange}/>
          </div>

          {/* Form elements */}
          <div className="form-area">
              {/* First Name */}
              <Select name="country" id="country" handleChange={handleChange}/>
          </div>

          {/* Radio */}
          <div className="form-area">
              <Radio checked={gender}  handleChange={genderChange}/>
          </div>


          {/* Date */}
          <div className="form-area">
              <DatePicker placeholder="Select the date" pickerType="Date" label="Date of birth" name="dob" id="dob"  dateChange= {() => dateChange} icon={true}/>
          </div>

          {/* Time */}
          <div className="form-area">
              <DatePicker placeholder="Select the time" timeFormat='hh:mm a' timeIntervals={60} pickerType="Time" label="Time" name="dob" id="dob"  dateChange= {dateChange} icon={true}/>
          </div>

          {/* File Uploader with button */}
          <div className="form-area">
              <FileUploader id="upload" name="upload" buttonLabel="Choose File" labelText="Upload File" labelDescription="Max file size is 500kb. Only .jpg files are supported." mutiple={false} fileType="button" withIcon={true} disable={false} accept="image/png, image/jpg, image/jpeg" FileChange={FileChange} />
          </div>

          {/* File Uploader with dragdrop */}
          <div className="form-area">
              <FileUploader  id="upload" name="upload" buttonLabel="Choose File" labelText="Upload File" labelDescription="Max file size is 500kb. Only .jpg files are supported." mutiple={false} fileType="dragdrop" withIcon={true} disable={false} accept="application/pdf" labelTittle="Drag and drop some files here or click to select files" FileChange={FileChange} />
          </div>

          {/* Alert */}
          <div className="form-area">
              <Alert title="Primary Alert!" message='This is a primary alert—check it out!' alertType='primary' alertIcon={true} closeIcon={true} iconName="check" />
          </div>

          {/* Avatars */}
          <div className="form-area">
            <Avatars borderRadius="5" size="small" name="Anna Adame" designation='Admin'/>
          </div>

          {/* Accordion */}
          <div className="form-area">
            <Accordion iconName="rightFill" initialActiveItemIndex={1} closeOtherItemsOnClick={true}/>
          </div>

          {/* Back button */}
          <div className="form-area">
            <BackButton buttonLabel="Button" icon={true} iconName="leftArrow" tooltipShow={true} tooltipContent="Back button"/>
          </div>
          
          {/* Drop down */}
          <div className="form-area">
            <DropDown label='Dropdown Menu' clickable={false} iconName="dropDown" placement='bottom' />
          </div>
          
          {/* Tooltip */}
          <div className="form-area">
            <p>
              <Tooltip message="Tooltip content" position="top" actions="hover">
                <strong>Lorem Ipsum</strong> 
              </Tooltip> is simply dummy <Tooltip message="Tooltip content" position="bottom" actions="hover">
                <strong>text</strong> 
              </Tooltip> of the printing and typesetting <Tooltip message="Tooltip content" position="right" actions="click">
                <strong>industry.</strong> 
              </Tooltip>
            </p>
            
          </div>

          {/* Breadcrumb */}
          <div className="form-area">
            <Breadcrumb separator="leftArrow"/>
          </div>

          {/* Button */}
          <div className="form-area">
            <Button id="button" name="button" size="medium" variant='primary' buttonType="button" labelShow={true} buttonLabel="Button" iconPostions='left' iconName="person" iconShow={true} handleClick={handleClick}/>
          </div>

          {/* Card */}
          <div className="form-area">
            <Card cardTitle='Card title' cardSubTitle='Card subtitle' cardContent='Some quick example text to build on the card title and make up the bulk of the card content.' image={CardImage} buttonShow={true} buttonLabel="Go somewhere"/>
          </div>

          {/* Image Radio */}
          <div className="form-area">
            <ImageRadio iconShow={true} labelShow={false}  checked={imageRadio}  handleChange={imageRadioChange}/>
          </div>

          {/* MOdal */}
          <div className="form-area">
            <Modal show={showModal} handleClose={hideModal} header="Basic Modal" size="medium" >
              <h4>Modal body</h4>
              <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
            </Modal>
            <Button id="button" name="button" size="medium" variant='primary' buttonType="button" labelShow={true} buttonLabel="Modal Open" iconPostions='left' iconShow={false} handleClick={handleClickModal}/>
          </div>

          {/* Tag */}
          <div className="form-area">
            <Tag content="First tag tag tag" variant="primary" size="medium" rounded={false} close={true} />
          </div>

          {/* Spinner */}
          <div className="form-area">
            <Spinner buttonShow={false} variant="primary" size="large" />
          </div>

          {/* Pagination */}
          <div className="form-area">
            <Pagination rounded={false} currentPage={currentPage} recordPerPage={recordPerPage} totalRecords={totalRecords} pageRange={pageRange} handlePageChange={handlePageChange}/>
          </div>

          {/* Tabs */}
          <div className="form-area">
            <Tabs type="default" defaultTab={1} icon={true} tabLabel={true}/>
          </div>



        </div>
      </div>
      {/* Scroll top button */}
      <div className='scroll-btn'>
        <ScrollTop show={true} scrollToTop={scrollToTop} buttonLabel="Scroll top" variant='primary' icon={true} iconName="topArrow"/>
      </div>
    </div>
  );
}

export default App;