import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
import {
  Button,
  Card,
  Container,
  Header,
  Popup,
  Segment
} from "semantic-ui-react";
import { deleteEmployeeRequest } from "../../../actions/employee/saga.actions";

class ClientProviders extends Component {
  deleteEmployee = uuid => {
    this.props.dispatch(deleteEmployeeRequest(uuid));
  };

  render() {
    const { selfUser } = this.props;
    if (selfUser.client) {
      return (
        <ClientProvidersView
          user={selfUser}
          deleteEmployee={this.deleteEmployee}
        />
      );
    } else {
      return <Redirect to="/" />;
    }
  }
}

function mapStateToProps(state) {
  return { selfUser: state.user.selfUser };
}

const ClientProvidersView = ({ user, deleteEmployee }) => (
  <Container>
    <Header>Providers</Header>
    <Segment>
      <Button
        basic
        color="green"
        size="small"
        as={Link}
        to="/user/profile/client/add-provider"
      >
        Add a Provider
      </Button>
    </Segment>
    {(user.client.employees || []).filter(employee => !employee.deleted)
      .length > 0 && (
      <Card.Group>
        {user.client.employees
          .filter(employee => !employee.deleted)
          .map((employee, index) => (
            <Card key={index}>
              <Card.Content>
                <Card.Header as="h4">{employee.provider}</Card.Header>
                <Card.Description>{employee.note}</Card.Description>
                <Popup
                  content={
                    <div>
                      Are you sure you want to delete this employee?<br />
                      <Button
                        basic
                        color="red"
                        size="small"
                        onClick={() => deleteEmployee(employee.uuid)}
                      >
                        Confirm Deletion
                      </Button>
                    </div>
                  }
                  trigger={
                    <Button basic color="red" size="small">
                      Delete
                    </Button>
                  }
                  on="click"
                  position="top right"
                />
              </Card.Content>
            </Card>
          ))}
      </Card.Group>
    )}
  </Container>
);

export default connect(mapStateToProps)(ClientProviders);