policy2

import React, { Component, useState } from 'react';
import './Layout.css';
import './pages.css';
import Tabs from './Tabs';
import Layout from './Layout';
import { connect } from 'react-redux';
import { setData } from '../actions/schemeActions';
import Details from './PolicyTabs/Details';


class Policy extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedOption: '',
        userEmail: '',
        userPassword: '',

      };
    }

    // Event handler to handle select change
    handleSelectChange = (event) => {
      this.setState({ selectedOption: event.target.value });
    };

    // Event handler to capture user details
    handleInputChange = (event) => {
      const { name, value } = event.target;
      this.setState({ [name]: value });
    };

    componentDidMount() {
      const accessToken = localStorage.getItem('accessToken');
       const credentials = {
            email:this.state.userEmail,
            password: this.state.userPassword
       };


       fetch('http://192.0.1.23:5000/scheme?id=8280', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',

        },
        body: JSON.stringify(credentials),
      })
        .then((loginResponse) => loginResponse.json())
        .then((loginData) => {

          const token = loginData.token;

          console.log('Token:', token);

          fetch('http://192.0.1.23:5000/scheme?id=8280', {
            headers: {
              Authorization: `Bearer ${accessToken}`,

            },
          })
            .then((response) => response.json())
            .then((data) => {
              this.props.setData(data);
            })
            .catch((error) => {
              console.error('Error fetching data from protected API:', error);
            });
        })
        .catch((loginError) => {
          console.error('Error during login:', loginError);
        });
    }


    render() {
      const { data } = this.props;

      const tabNames = [
        'Details',
        'Rules',
        'Providers',
        'Insurers',
        'Inclusions and Exclusions',
        'Benefits',
        'Family Structure',
        'Self Fund Payment',
        'SLAs'
      ];



      return (
       <>
       <Layout >

       <div className='main-header'>
        <div className='policy-section'>

           <select id="mySelect">
              <option value="option1">Policy 1</option>
              <option value="option2">Policy 2</option>
              <option value="option3">Policy 3</option>
              <option value="option4">Policy 4</option>
           </select>

           <div className='policy-number'>
              <span>Policy Number</span>
           </div>
        </div>


          <select id="mySelect">
              <option value="option1">Scheme 1</option>
              <option value="option2">Scheme 2</option>
              <option value="option3">Scheme 3</option>
              <option value="option4">Scheme 4</option>
           </select>


        <div className='scheme-section'>

            <div className='scheme-name'>
            <span>Scheme Name</span>
            </div>

            <div className='scheme-company-duration'>
              <span>Turnkey Africa Jan 2023 to Dec 2023</span>
            </div>
          </div>
        </div>


        <div className='main-content'>
          <Tabs tabNames={tabNames}/>
          {/* {tabNames[0] === 'Details' && <Details data={data} />} */}
        </div>
       </Layout>
       </>

      );
    }
  }

  const mapStateToProps = (state) => ({
    data: state.scheme.data,
  });

  const mapDispatchToProps = {
    setData,
  };


  export default connect(mapStateToProps, { setData })(Policy);