import { FormSection } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import Header from '../../common/Header';
import TimedServiceDropdown from './TimedService';
import ServiceTypeDropdown from './ServiceType';
import DeliveryPointDropdown from './DeliveryPoint';
import ServiceLevel from './ServiceLevel';
import AssemblyType from './AssemblyType';
import OrderServices from './OrderServices';

function ServicesSection() {
  return (
    <CustomFormSection>
      <Header label="Services" />
      <Top>
        <DropDownContainer>
          <TimedServiceDropdown />
          <ServiceTypeDropdown />
          <DeliveryPointDropdown />
        </DropDownContainer>
        <RadioContainer>
          <ServiceLevel />
          <AssemblyType />
        </RadioContainer>
      </Top>
      <Bottom>
        <OrderServices />
      </Bottom>
    </CustomFormSection>
  );
}

const Top = styled.div`
  display: flex;
  gap: 30px;

  @media screen and (max-width: 1280px) {
    flex-direction: column;
    gap: 20px;
  }
`;

const DropDownContainer = styled.div`
  display: contents;
  @media screen and (max-width: 1280px) {
    display: flex;
    gap: 15px;
  }
`;

const RadioContainer = styled.div`
  display: contents;
  @media screen and (max-width: 1280px) {
    display: flex;
    gap: 15px;
  }
`;

const Bottom = styled.div``;

const CustomFormSection = styled(FormSection)`
  flex: 1;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  label,
  input,
  span {
    cursor: default !important;
  }
`;

export default ServicesSection;
