import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowRightOutlined } from '@ant-design/icons';
import { Form, Input, Button, Space, Row, Col, Switch } from 'antd';
import { launchLocationValidator, launchNameValidator } from '../validator';
import InputText from '@/components/form/InputText';
import MasterCities from '@/components/masterDropdowns/MasterCities';
import { type Session } from 'next-auth';
import { type storeDataI } from '../add-launch/page';
import { type FormInstance } from 'antd/lib';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '@/store/store';
import { fetchRoles } from '@/app/role/slice';
import { getRoleIdMap } from '@/utills/helper';
import { useRoles } from '@/hooks/useRoles';
const LaunchDetails = ({
  form,
  userData,
  storeData,
  setStoreData,
}: {
    form: FormInstance
    userData: Session | null
    storeData: storeDataI
    setStoreData: (storeData: storeDataI) => void
}) => {
  const router = useRouter();
  const [roleFilters, setRoleFilters] = useState<any>({
        page: 1,
        sortColumn: 'sort_order',
      });
  const dispatch: AppDispatch = useDispatch();
  const { roles } = useSelector((state: RootState) => state.roles);
  useEffect(() => {
      if(roles?.length === 0) {
        dispatch(fetchRoles(roleFilters));
      }
    }, [roles]);
  const allRoles = getRoleIdMap(roles);
  const { getRoleByName } = useRoles();

  return (
    <>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: '-10px', right: 0, zIndex: 1 }}>
          <Switch
            checked={Boolean(storeData.is_sustenance)}
            onChange={(checked) => {
              setStoreData({ ...storeData, is_sustenance: checked ? 1 : 0 });
            }}
            checkedChildren="Sustenance"
            unCheckedChildren="Non-Sustenance"
            className="sustenance-switch"
          />
        </div>
        <Row gutter={24}>
          <Col span={24} md={12}>
            <Form.Item
              label="Launch Name"
              name="name"
              rules={[{ required: true, validator: launchNameValidator }]}>
              <Input placeholder="Enter Launch Name" />
            </Form.Item>
          </Col>
          <Col span={24} md={12}>
            <InputText
              name="location"
              label="Location"
              placeholder="Enter Location"
              rules={[{ required: true, validator: launchLocationValidator() }]}
            />
          </Col>

          {userData?.user.role?.id === getRoleByName('super_admin')?.id ? (
            <Col span={24} md={12}>
              <MasterCities
                label="City"
                name="city_id"
                placeholder="Select City"
                disabled={storeData.disableCityDropdown}
                rules={[{ required: true, message: 'Please Select a City' }]}
                filter={{
                  status: 'active',
                }}
                onChange={(value) => {
                  form.setFieldsValue({ city_id: value });
                }}
              />
            </Col>
          ) : (
            <div style={{ display: 'none' }}>
              <InputText label="City" name="city_id" />
            </div>
          )}
        </Row>
      </div>
      <div className="d-flex justify-content-end">
        <Space direction="horizontal" align="end">
          <Button
            type="default"
            onClick={() => {
              router.push('/launches');
            }}>
                        Cancel
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            icon={<ArrowRightOutlined />}
            className="btn-icon-right">
                        Next
          </Button>
        </Space>
      </div>
    </>
  );
};

export default LaunchDetails;