import React, { useState } from 'react';
import styled from 'styled-components';
import { useToasts } from 'react-toast-notifications';
import { AvatarWText } from '../../components/common/avatars/AvatarWText';
import { DropWMoreIcons } from '../../components/dropdowns/DropWIcon';
import { ModalWrapper } from '../modals/ModalWrapper.modal';
import {
  DeleteButton,
  NofillButtonsm,
} from '../../components/common/buttons/PrimaryBtn';
import { getNameInitials } from '../../utils/helpers';

const AgentInfoList = ({
  agent,
  deleteAnAgent,
  getAllAgents,
  disableAgent,
}) => {
  const [deleteModal, setdeleteModal] = useState(false); // const [loading, setLoading] = useState(false)

  const { addToast } = useToasts();

  const onDeleteAnAgent = async () => {
    const deleteAgent = {
      agents: [agent?._id],
    };
    const deleteData = await deleteAnAgent(deleteAgent);

    if (deleteData?.success) {
      getAllAgents();
      addToast('Agent has been deleted successfully', {
        appearance: 'success',
      });
    }
  };

  const onDisableAgent = async () => {
    const disabledAgentData = await disableAgent(agent?._id);

    if (disabledAgentData?.success) {
      addToast('Agent has been disabled successfully', {
        appearance: 'success',
      });
      setdeleteModal(false);
    } else {
      addToast('Agent has already been disabled', {
        appearance: 'error',
      });
      setdeleteModal(false);
    }
  };

  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      AgentsInfo,
      {
        className: 'agent-list',
      },
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'name',
        },
        /*#__PURE__*/ React.createElement('input', {
          type: 'checkbox',
          name: 'agents',
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'avatar-wrapper',
          },
          /*#__PURE__*/ React.createElement(AvatarWText, {
            initials: getNameInitials(
              agent && agent.firstName
                ? `${agent?.firstName} ${agent?.lastName}`
                : 'New User'
            ),
            image: agent?.profilePicture,
            name:
              agent && agent.firstName
                ? `${agent.firstName} ${agent.lastName}`
                : 'New User',
            email: agent?.email,
          })
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'agent-details d-flx-alc-jsb',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'location',
          },
          /*#__PURE__*/ React.createElement('h4', null, 'Location'),
          /*#__PURE__*/ React.createElement(
            'p',
            null,
            agent?.location
              ? `${agent?.location?.city + ' , ' + agent?.location?.country}`
              : 'No Location'
          )
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'response',
          },
          /*#__PURE__*/ React.createElement(
            'p',
            null,
            /*#__PURE__*/ React.createElement(
              'span',
              null,
              agent?.response ? agent?.response : 0
            )
          ),
          /*#__PURE__*/ React.createElement('h4', null, 'Responses')
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'options',
          },
          /*#__PURE__*/ React.createElement(
            DropWMoreIcons,
            null,
            /*#__PURE__*/ React.createElement(
              'ul',
              {
                className: 'drop-list',
              },
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  className: 'drop-list-item',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#agent-group',
                  })
                ),
                /*#__PURE__*/ React.createElement('span', null, 'Add to group')
              ),
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  className: 'drop-list-item',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#disable',
                  })
                ),
                /*#__PURE__*/ React.createElement(
                  'span',
                  {
                    onClick: () => setdeleteModal(true),
                  },
                  'Disable agent'
                )
              ),
              /*#__PURE__*/ React.createElement(
                'li',
                {
                  className: 'drop-list-item border-top',
                },
                /*#__PURE__*/ React.createElement(
                  'svg',
                  null,
                  /*#__PURE__*/ React.createElement('use', {
                    href: '/images/icons.svg#delete',
                  })
                ),
                /*#__PURE__*/ React.createElement(
                  'span',
                  {
                    onClick: () => onDeleteAnAgent([agent?._id]),
                  },
                  'Delete'
                )
              )
            )
          ),
          /*#__PURE__*/ React.createElement(
            ModalWrapper,
            {
              visible: deleteModal,
              setvisible: setdeleteModal,
              title: 'You\u2019re about to disable this agent',
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'px-4',
              },
              /*#__PURE__*/ React.createElement(
                'p',
                null,
                'You can always reactivate them some other time, their details won\u2019t be deleted'
              )
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'd-flx-alc-jfe modal-action-wrap',
              },
              /*#__PURE__*/ React.createElement(NofillButtonsm, {
                title: 'No, I\u2019ll pass',
                onclick: () => setdeleteModal(false),
              }),
              /*#__PURE__*/ React.createElement(
                DeleteButton, // loading={setSaving}
                {
                  onclick: () => onDisableAgent(agent?._id),
                  title: 'Disable',
                }
              )
            )
          ),
          /*#__PURE__*/ React.createElement(
            'p',
            {
              className: 'text',
            },
            'options'
          )
        )
      )
    )
  );
};

export default AgentInfoList;
const AgentsInfo = styled.li`
  padding: 2rem;
  border-radius: 12px;
  width: 100%;
  @media (min-width: 992px) {
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .name {
    position: relative;
    padding: 0 5rem;
    margin-bottom: 2rem;
    position: relative;
    @media (min-width: 768px) {
      padding-left: 4rem;
    }
    @media (min-width: 992px) {
      padding-left: 4rem;
      margin-bottom: 0rem;
    }
    @media (min-width: 1024px) {
      padding-left: 6rem;
      margin-bottom: 0rem;
    }
    input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;
    }
    .avatar-wrapper:before {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 2px;
      background: #c5c9da;
      position: absolute;
      top: 50%;
      left: 1rem;
      padding: 0.5rem;
      transform: translateY(-50%);
    }
  }
  .drop-list-item {
    padding: 1rem;
  }
  .agent-details {
    @media (min-width: 1024px) {
      min-width: 50%;
    }
    > * {
      padding: 0 3rem;
      @media (min-width: 1024px) {
        padding: 0 2rem;
      }
      @media (min-width: 1280px) {
        padding: 0 3rem;
      }
    }
  }
  .location {
    h4 {
      color: #61677c;
      font-size: 14px;
      font-family: var(--ff-body);
      font-weight: 400;
      line-height: 1.6;
    }
    p {
      color: #0a1045;
      font-size: 1.4rem;
      font-family: var(--ff-medium);
      font-weight: 500;
      line-height: 1.6;
      @media (min-width: 1280px) {
        font-size: 1.6rem;
      }
    }
  }
  .response {
    border-left: 1px solid #e8edff;
    border-right: 1px solid #e8edff;
    p {
      color: #0a1045;
      font-size: 2.4rem;
      font-family: var(--ff-heading);
      font-weight: 700;
      line-height: 1.6;
      @media (min-width: 1280px) {
        font-size: 2.4rem;
      }
    }
    h4 {
      color: #61677c;
      font-size: 14px;
      font-family: var(--ff-body);
      font-weight: 400;
    }
  }
  .options {
    position: relative;
    .drop-list {
      position: relative;
      z-index: 40;
    }
    p.text {
      display: none;
      @media (min-width: 1280px) {
        display: block;
      }
    }
  }
  input:checked ~ .avatar-wrapper:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px 10px;
    border: 1.5px solid #004bff;
  }
`;
