import React from 'react';
import styled from 'styled-components';
import EmailAddress from './EmailAddress';
import ContactPhone from './ContactPhone';
import ContactWork from './ContactWork';
import ContactMobile from './ContactMobile';
import ContactTypeDropdown from './ContactTypeDropdown';
import ActionDropdown from './ActionDropdown';
import DeliveryDate from './DeliveryDate';
import TimedServiceDropdown from './TimedServiceDropdown';
import { useOrderDetailsConfirmOrder } from '../../../../store';

function CustomerInformation() {
  const [orderDetails] = useOrderDetailsConfirmOrder();

  return (
    <Container>
      <Title>Address</Title>
      <AddressField>{orderDetails?.order_recipient?.address}</AddressField>
      <Wrapper>
        <EmailAddress />
        <ContactPhone />
      </Wrapper>
      <Wrapper>
        <ContactWork />
        <ContactMobile />
      </Wrapper>
      <Wrapper>
        <ContactTypeDropdown />
        <ActionDropdown />
      </Wrapper>
      <Wrapper>
        <DeliveryDate />
        <TimedServiceDropdown />
      </Wrapper>
    </Container>
  );
}

const Wrapper = styled.div`
  display: flex;
  gap: 15px;
  width: 100%;
  .contact-type-dropdown,
  .action-dropdown {
    flex: 1;
  }
`;

const AddressField = styled.p`
  color: #3a3630;
  font-family: 'Open Sans';
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
  margin: 0;
`;

const Title = styled.span`
  color: #3a3630;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
`;

const Container = styled.div`
  padding: 15px 12px;
  flex: 1 0 0;
  border-radius: 15px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 15px;
`;

export default CustomerInformation;
