[id].tsx

import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import Button from '../../../Components/Common/Button';
import Card from '../../../Components/Common/Card';
import Body2 from '../../../Components/Common/Tipography/Body2';
import Caption from '../../../Components/Common/Tipography/Caption';
import H4 from '../../../Components/Common/Tipography/H4';
import H5 from '../../../Components/Common/Tipography/H5';

import Container from './[id]Styles';
import Hero from '../../../Components/System/Hero';
import { SideBarDir } from '../../../Components/System/SideBar/SideBarDir';
import Authenticator from '../../../Helpers/Authenticator';
import LayoutDir from '../../../Layouts/LayoutDir';
import LayoutAside from '../../../Layouts/LayoutAside';
import LayoutContent from '../../../Layouts/LayoutContent';
import Tabs from '../../../Components/Tabs';
import Tab from '../../../Components/Tabs/Tab';

import { useRouter } from 'next/router';
import { api } from '../../../Services';
import Modal from '../../../Components/Modal';

import PropTypes from 'prop-types';
import { withTranslation } from './../../../../i18n';
import { shadows } from '../../../Styles/shadows';
import WrappedMap from '../../../Components/Map';
import Mark from '../../../Components/Map/Marker';

const Subestacion = ({ t, tReady }) => {
  const route = useRouter();
  const [activo, setActivo] = useState([]);
  const [org_token_id, setOrgTokenId] = useState<string>('');
  const [token_id, setTokenId] = useState('');
  const [successModal, setSuccessModal] = useState<boolean>(false);

  const [successModalMessage, setSuccessModalMessage] = useState<string>('');
  const { id } = route.query;

  console.log('Activo', activo);

  const deleteActivo = async (activo_id) => {
    console.log('use', org_token_id);
    await api
      .delete(`/services/organization/${org_token_id}/assets/${activo_id}`, {
        headers: {
          Authorization: `Bearer ${token_id}`
        }
      })
      .then((success) => {
        console.log('foi');
        setSuccessModal(!successModal);
        setSuccessModalMessage('Acitvio deletado com sucesso');
      })
      .catch((error) => {
        console.log(' não foi');
        setSuccessModal(!successModal);
        setSuccessModalMessage('Algun error Ocurrio');
      });
  };

  useEffect(() => {
    const id_token = sessionStorage.getItem('id_token');
    const org = sessionStorage.getItem('org_id');
    setOrgTokenId(org);
    setTokenId(id_token);
    api
      .get(`services/organization/${org}/assets/${id}`, {
        headers: {
          Authorization: `Bearer ${id_token}`
        }
      })
      .then((success) => {
        const { data } = success;
        setActivo(data);
        console.log(data);
      });
  }, []);

  console.log('activo', activo);
  return (
    <Authenticator>
      <LayoutDir>
        <LayoutAside>
          <SideBarDir logo="/static/images/logo-seis-blue.svg" />
        </LayoutAside>
        {activo.length !== 0 && (
          <LayoutContent>
            {activo.map((act) => (
              <Hero
                key={act.serial}
                bsize="cover"
                bcolor="#212121"
                title={act.name}
                description={act.description}
                bgimage={act.picture}
              >
                <Button
                  rounded
                  whiteOutline
                  marginRight="10px"
                  text={t('button.delete')}
                  onClick={() => deleteActivo(id)}
                />
                <Link href={`/dir/subestaciones/editar/${[id]}`}>
                  <a className="btn btn-whiteOutline rounded">
                    {t('button.edit')}
                  </a>
                </Link>
              </Hero>
            ))}

            <Container>
              <Tabs type={'dir'}>
                <Tab title={t('tab.detail.label')}>
                  <Card
                    borderRadius={'16px'}
                    padding={'lg'}
                    backgroundColor={'#fff'}
                    shadow={shadows.xs}
                  >
                    {activo.map((act) => (
                      <section key={act.coordinator_id.$oid}>
                        <header>
                          <H4
                            marginBottom={'sm'}
                            text={t('tab.detail.general-information.title')}
                          />
                          <Body2
                            marginBottom={'md'}
                            text={t(
                              'tab.detail.general-information.description'
                            )}
                          />
                        </header>
                        <main>
                          <Body2 marginBottom={'md'} text={act.description} />
                          <div className="list-data">
                            <ul>
                              {act.name && (
                                <li>
                                  <Caption text={'name'} />
                                  <H5 text={act.name} />
                                </li>
                              )}
                              {act.trademark && (
                                <li>
                                  <Caption
                                    text={t(
                                      'tab.detail.general-information.data.brand'
                                    )}
                                  />
                                  <H5 text={act.trademark} />
                                </li>
                              )}
                              {act.model && (
                                <li>
                                  <Caption
                                    text={t(
                                      'tab.detail.general-information.data.model'
                                    )}
                                  />
                                  <H5 text={act.model} />
                                </li>
                              )}
                              {act.serial && (
                                <li>
                                  <Caption
                                    text={t(
                                      'tab.detail.general-information.data.serial'
                                    )}
                                  />
                                  <H5 text={act.serial} />
                                </li>
                              )}
                              {act.mnemonic && (
                                <li>
                                  <Caption
                                    text={t(
                                      'tab.detail.general-information.data.mnemonic'
                                    )}
                                  />
                                  <H5 text={act.mnemonic} />
                                </li>
                              )}

                              {act.manufacturing_date && (
                                <li>
                                  <Caption
                                    text={t(
                                      'tab.detail.general-information.data.manufacturing-date'
                                    )}
                                  />
                                  <H5
                                    text={act.manufacturing_date.replaceAll(
                                      '-',
                                      '/'
                                    )}
                                  />
                                </li>
                              )}
                            </ul>
                          </div>
                        </main>
                      </section>
                    ))}
                  </Card>
                  <Card
                    borderRadius={'16px'}
                    padding={'lg'}
                    backgroundColor={'#fff'}
                    shadow={shadows.xs}
                  >
                    <section>
                      <header>
                        <H4 marginBottom={'sm'} text={'Ubicacíon del Activo'} />
                        <Body2
                          marginBottom={'md'}
                          text={'informacion Geografica'}
                        />
                      </header>
                      <main>
                        <WrappedMap
                          googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.NEXT_PUBLIC_MAP_KEY}`}
                          loadingElement={<div style={{ height: `100%` }} />}
                          containerElement={<div style={{ height: `392px` }} />}
                          mapElement={<div style={{ height: `100%` }} />}
                        >
                          {activo.map((asset) => (
                            <Mark
                              key={asset._id.$oid}
                              places={[
                                {
                                  id: asset._id.$oid,
                                  alt: asset.name,
                                  lat: parseFloat(asset.dependencies.latitude),
                                  long: parseFloat(
                                    asset.dependencies.longitude
                                  ),
                                  pin: asset.name,
                                  description: asset.description,
                                  picture: asset.picture
                                }
                              ]}
                            />
                          ))}
                        </WrappedMap>
                      </main>
                    </section>
                  </Card>

                  <Card
                    borderRadius={'16px'}
                    padding={'lg'}
                    backgroundColor={'#fff'}
                    shadow={shadows.xs}
                  >
                    <section>
                      <header>
                        <H4
                          marginBottom={'sm'}
                          text={t('tab.detail.dependencies.title')}
                        />
                        <Body2
                          marginBottom={'md'}
                          text={t('tab.detail.dependencies.description')}
                        />
                      </header>
                      <main>
                        {activo &&
                          activo.map((dependency) => (
                            <div className="list-data" key={dependency.name}>
                              <ul>
                                {dependency.dependencies.type_installation && (
                                  <li>
                                    <Caption
                                      text={t(
                                        'tab.detail.dependencies.data.superior-dependency'
                                      )}
                                    />

                                    <H5 text={dependency.zone[0].name} />
                                  </li>
                                )}
                                {dependency.dependencies
                                  .start_dependence_date && (
                                  <li>
                                    <Caption
                                      text={t(
                                        'tab.detail.dependencies.data.initial-date'
                                      )}
                                    />
                                    <H5
                                      text={dependency.dependencies.start_dependence_date.replaceAll(
                                        '-',
                                        '/'
                                      )}
                                    />
                                  </li>
                                )}
                                {dependency.dependencies
                                  .end_dependence_date && (
                                  <li>
                                    <Caption
                                      text={t(
                                        'tab.detail.dependencies.data.end-date'
                                      )}
                                    />
                                    <H5
                                      text={dependency.dependencies.end_dependence_date.replaceAll(
                                        '-',
                                        '/'
                                      )}
                                    />
                                  </li>
                                )}
                                {dependency.dependencies.latitude && (
                                  <li>
                                    <Caption text={'Latituide'} />
                                    <H5
                                      text={dependency.dependencies.latitude}
                                    />
                                  </li>
                                )}
                                {dependency.dependencies.longitude && (
                                  <li>
                                    <Caption text={'Latituide'} />
                                    <H5
                                      text={dependency.dependencies.longitude}
                                    />
                                  </li>
                                )}
                              </ul>
                            </div>
                          ))}
                      </main>
                    </section>
                  </Card>
                </Tab>

                <Tab title={t('tab.specs.label')}>
                  <Card
                    borderRadius={'16px'}
                    padding={'lg'}
                    backgroundColor={'#fff'}
                    shadow={shadows.xs}
                  >
                    <section>
                      <header>
                        <H4 marginBottom={'sm'} text={'Especs generales'} />
                        <Body2
                          marginBottom={'md'}
                          text={'Información general del activo'}
                        />
                      </header>
                      <main></main>
                    </section>
                  </Card>
                </Tab>
              </Tabs>
            </Container>
          </LayoutContent>
        )}
        {successModal && (
          <Modal
            text={successModalMessage}
            stateClass={`fade-in ${!successModal && 'fade-out'} `}
          >
            <Link href="/dir/activos">
              <a className="btn btn-default"> Volver a activos</a>
            </Link>
          </Modal>
        )}
      </LayoutDir>
    </Authenticator>
  );
};

Subestacion.getInitialProps = async () => ({
  namespacesRequired: ['dir-assets-asset']
});

Subestacion.propTypes = {
  t: PropTypes.func.isRequired
};

export default withTranslation(['dir-assets-asset'])(Subestacion);