import React from 'react';
import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
import { useCurrentAction } from '../../../store';
import {
  Container,
  ContentContainer,
  Row,
  SplitLayout,
  StaticText,
  StyledTextAreas,
} from '../modalstyle';
import CustomerServiceImg from '../../../../../assets/icons/CustomerServiceImg';
import PackedImg from '../../../../../assets/icons/PackedImg';
import InnovativeBulb from '../../../../../assets/icons/InnovativeBulb';
import ProfileImg from '../../../../../assets/icons/ProfileImg';
import GrowthImg from '../../../../../assets/icons/GrowthImg';
import FeedbackItem from './FeedbackItem';

function LogFeedback() {
  const [, setCurrentAction] = useCurrentAction();

  const closeModal = () => {
    setCurrentAction(undefined);
  };
  return (
    <OrderActionModal
      headerTitle="MR ANDY CRONK"
      onCloseHeader={closeModal}
      onSubmit={() => {}}
      showAdditionalInfo
      infoText="632801 (OFS)"
      submitBtnTitle="Save Details"
    >
      <ContentContainer>
        <SplitLayout>
          <FeedbackItem
            icon={CustomerServiceImg}
            question={
              'How would you rate the communication prior to their arrival at your property?'
            }
          />
          <FeedbackItem
            icon={PackedImg}
            question={
              'How would you rate the handling of the products by the team?'
            }
          />
        </SplitLayout>

        <SplitLayout>
          <FeedbackItem
            icon={InnovativeBulb}
            question={
              'How would you rate the explanation on the level of service they have provided you today?'
            }
          />
          <FeedbackItem
            icon={ProfileImg}
            question={
              'How would you rate the level of professionalism shown by the team?'
            }
          />
        </SplitLayout>

        <SplitLayout>
          <FeedbackItem
            icon={GrowthImg}
            question={
              'How would you rate the overall performance during the delivery process?'
            }
          />
          <Row>
            <Container>
              <StaticText>Anything below 3 needs to be investigated</StaticText>
              <StyledTextAreas name="note" placeholder="Write here..." />
            </Container>
          </Row>
        </SplitLayout>
      </ContentContainer>
    </OrderActionModal>
  );
}

export default LogFeedback;
